RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い

1
gem 'pusher'

1
2
3
4
5
6
7
8
9
10
11
  # Real time notification
  require 'pusher'
  Pusher.url = "http://7f115110ccdsxxxxxxxxx:[email protected]/apps/100000"
  Pusher.logger = Rails.logger

  # Lines below are needed only for development environment.
  # In production, Pusher will automatically take care of this.
  require 'pusher'
  Pusher.app_id = '000000'
  Pusher.key    = '7f1151xxxxxxxxxxxxxxxxxx'
  Pusher.secret = 'f7b9a0f68dc6xxxxxxxxxxxxx'

1
2
  <!-- Pusher (Heroku addon) -->
  <script src="//js.pusher.com/2.2/pusher.min.js" type="text/javascript"></script>

1
2
$ vi ~/.bash_profile
export PUSHER_API_KEY="7b01788fd3cxxxxd05470"

1
$ heroku config:set YADOKALY_PUSHER_API_KEY=7b01788fdxxxxx05470

1
2
<span id="current_user_id" data-value="<%= current_user.id %>" style="display:none;"></span>
<span id="pusher_api_key" data-value="<%= ENV['PUSHER_API_KEY'] %>" style="display:none;"></span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 class PusherController < ApplicationController
  protect_from_forgery :except => :auth # stop rails CSRF protection for this action

  def auth
    if current_user
      response = Pusher[params[:channel_name]].authenticate(params[:socket_id])
      render :json => response
    else
      render :text => "Not authorized", :status => '403'
    end
  end

  def push
    Pusher['private-'+current_user.id.to_s].trigger('new_message', {:sender => current_user.name, :link => "/chatroom/123"})
    render nothing: true
  end

end

1
2
  post 'pusher/auth'
  get 'pusher/push'

1
<%= link_to "push", "/pusher/push", remote: true %>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
pusher_reset = ->
    # Disconnect and remove all pusher instance
    # to avoide multiple execution.
    if Pusher
        $.each(Pusher.instances, (index, instance) ->
            instance.disconnect()
        )
        Pusher.instances = []
        console.log 'pusher_reset fired.'


ready = ->

    # Pusher notification
    # Pusher['private-1'].trigger() in controller
    current_user_id = $('#current_user_id').attr('data-value')
    api_key = $('#pusher_api_key').attr('data-value')

    if Pusher && current_user_id
        pusher  = new Pusher(api_key, { cluster: 'eu' })
        channel = pusher.subscribe('private-' + current_user_id)

        channel.bind('new_message', (data) ->
            console.log 'fire'
            # Will be executed when the method in controller called.
            if !$('.notify-wrap').length
                $('body').prepend('<div class="notify-wrap"></div>')
            msg = data.sender + ' さんからメッセージを受信しました。'
            msgDiv = '<div class="notify">' + 
                                    '<span class="got-it"><i class="fa fa-times-circle"></i></span>' + 
                                    '<a href="' + data.link + '">' + msg + '</a>' + 
                                '</div>'
            $(msgDiv).prependTo('.notify-wrap').animate({ right: 0 }, 350)
            ### if you want to hide it after some seconds
            setTimeout( ->
                $('#notify').fadeOut()
            , 10000)
            ###
        )
    $('body').on 'click', '.got-it', (e) ->
        e.preventDefault()
        $(this).closest('.notify').remove()

# For turbolinks
$(document).ready(ready)
$(document).on 'page:load', ready
$(document).on 'page:receive', pusher_reset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
$c_light_gray: #F7F7F7;
$c_blue: #114aa9;
$c_gray: #666666;

.notify-wrap {
    z-index: 10;
    position: fixed;
    top: 10px;
    right: 10px;
    .notify {
        position: relative;
        right: -300px;
        width: 200px;
        border-radius: 5px;
        font-size: 0.85em;
        border: 3px solid $c_light_gray;
        background-color: #fff; 
        box-shadow: 0 4px 10px #ddd;
        margin-bottom: 10px;
        &:hover {
            border-color: lighten($c_blue, 42);
        }
        a {
            height: 100%;
            width: 100%;
            display: block;
            padding: 10px 15px;
            &:hover {
                text-decoration: none;
                //color: #fff;
            }
        }
        .got-it {
            position: absolute;
            top: -7px;
            right: -7px;
            font-size: 20px;
            width: 24px;
            height: 24px;
            line-height: 20px;
            border: 2px solid #fff;
            background-color: #fff;
            border-radius: 50%;
            text-align: center;
            cursor: pointer;
            &:hover {
                color: #fff;
                border: 2px solid $c_gray;
                background-color: $c_gray;
            }
        }
    }
}