CODEWITHSUNDEEP
websocketember.js
matthew
matthew

Reputation: 43

Ember.js & HTML 5 WebSockets

What is typically the best way for integrating HTML5 Websockets into an Ember.js application?

I've used Pusher.com in the past and have used a similar setup to this: http://blog.pusher.com/backbone-js-now-realtime-with-pusher/

I'm looking for the equivalent to Ember.js

Thanks guys!

Upvotes: 3

Views: 2292

Answers (2)

WallMobile
WallMobile

Reputation: 1959

I have setup an application using sockets. The way that I do it is that my main App file has a socket object and then receives messages from socket.io and puts them into an array. Any controllers that might be interested in listening for certain socket messages bind to the array and get new messages that come in. For example my chatController cares about chat messages, and my eventController cares about showing or hiding images based on socket events that are fired.

Below is some coffeescript code of how I set this up.

window.App = Ember.Application.create

  init: ->
    @_super()
    @setSocketIO()

  ##
  # socket - socket.io object for communicating with the server
  socket: null

  ##
  # socketMessages - array used to store any socket.io messages emitted from the server 
  socketMessages: []

  ##
  # setSocketIO - setup socket.io connection and message endpoints
  setSocketIO: ->
    @set 'socket', io.connect()

    ##
    # if the socket errors out, then reconnect it
    App.socket.on "error", (err) ->
      App.socket.socket.reconnect()

    ##
    # receive new messages
    App.socket.on "event-message-receive", (data) =>
      @createSocketMessage 'event-message-receive', data

    ##
    # image url recieved
    App.socket.on "event-image-set-receive", (data) =>
      @createSocketMessage 'event-image-set-receive', data

    ##
    # hide image recieved
    App.socket.on "event-image-hide-receive", () =>
      @createSocketMessage 'event-image-hide-receive'

and then in my chat controller I only listen for new messages received

App.ChatController = Ember.ArrayController.extend

    ##
    # chat messages
    chatMessages: []

    ##
    # socketMessageBinding - bind to the App.socketMessage message queue for receiving new    messages from the server
    socketMessagesBinding: 'App.socketMessages'

    ##
    # socketMessageAdded - called whenever a socket.io message is sent from teh server
    socketMessageAdded: (->
      # get the newest item on the stack
      socketMessage = @socketMessages[@socketMessages.length-1] 

      if socketMessage.type == 'event-message-receive'
        @chatMessages.pushObject socketMessage.data                    
  ).observes('socketMessages.@each')

and in my event controller I listen for image show and image hide

App.EventController = Ember.ArrayController.extend

  ##
  # property to show or hide an img on the page
  showImage: false

  ##
  # socketMessageBinding - bind to the App.socketMessage message queue for receiving new    messages from the server
  socketMessagesBinding: 'App.socketMessages'

  ##
  # socketMessageAdded - called whenever a socket.io message is sent from teh server
  socketMessageAdded: (->
    # get the newest item on the stack
    socketMessage = @socketMessages[@socketMessages.length-1] 

     if socketMessage.type == 'event-image-set-receive'     
       @set 'showImage', true
     else if socketMessage.type == 'event-image-hide-receive'
       @set 'showImage', false                   
  ).observes('socketMessages.@each')

Upvotes: 3

Wildhoney
Wildhoney

Reputation: 4969

You can have a look at the following on GitHub from 8 months ago, but at the moment there is no WebSocketsAdapter, as much as I'd love to see one. For the most part, people seem to be making ad-hoc WebSocketAdapters for their own scenarios.

I imagine that once EmberJS releases version 1.0, then you'll begin seeing a lot more third-party add-ons for it. As EmberJS, and in particular, EmberJS's DS (DataStore) are changing so rapidly, it would seem a little premature to begin creating a WebSocketAdapter unless you were fully committed to keeping it up-to-date as EmberJS/DS change rapidly from one day to the next.

Upvotes: 0

Related Questions