Ember.js and HTML 5 WebSockets
Generally the best way to integrate HTML5 websites into an Ember.js app?
I've used Pusher.com in the past and used a similar setup for this: http://blog.pusher.com/backbone-js-now-realtime-with-pusher/
I am looking for the Ember.js equivalent
Thanks guys!
source to share
You can take a look at following GitHub from 8 months ago, but not at the moment WebSocketsAdapter
, as much as I would like to see it. For the most part, people seem to be doing ad-hoc WebSocketAdapter
for their own scripts.
My guess is that as soon as EmberJS releases version 1.0, you'll start seeing a lot more third party add-ons for it. Since EmberJS and in particular the EmberJS DS (DataStore) is changing so quickly, it would be a bit premature to start building WebSocketAdapter
unless you were fully committed to keeping it up to date, as EmberJS / DS changes rapidly from one day to the next.
source to share
I have an application using sockets. The way I do this is that my main application 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 specific socket messages bind to an array and receive new messages. For example, my chatController takes care of the chat messages, and my EventController takes care of showing or hiding images based on the socket events fired.
Below is the coffeescript code how I installed it.
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 the chat controller I only listen to 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 showing images and hiding images
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')
source to share