Ember.js & HTML 5 WebSockets

Question

通常将HTML5 Websockets集成到Ember.js应用程序中的最佳方法是什么？

我以前使用过Pusher.com，并使用了类似于此设置：http://blog.pusher.com/backbone-js-now-realtime-with-pusher/

我正在寻找与Ember.js等效的解决方案

谢谢大家！

- matthew

---

这可能会有所帮助：https://dev59.com/qGYq5IYBdhLWcg3weAej - CraigTeegarden

Answer 1

我已经使用 sockets 设置了一个应用程序。我是这样做的：我的主 App 文件有一个 socket 对象，然后接收来自 socket.io 的消息并将它们放入数组中。任何可能对特定 socket 消息感兴趣的控制器都会绑定到该数组，并获取新消息。例如，我的 chatController 关心聊天消息，而我的 eventController 则关心基于触发的 socket 事件显示或隐藏图像。下面是我如何设置这个功能的一些 coffeescript 代码。

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'

然后在我的聊天控制器中，我只监听接收到的新消息。

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')

在我的事件控制器中，我监听图像显示和隐藏的事件。

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')

- WallMobile

Answer 2

你可以看看8个月前的GitHub上的以下内容，但目前还没有WebSocketsAdapter，尽管我很想看到一个。大多数情况下，人们似乎正在为自己的场景制作临时的WebSocketAdapter。

我想象一旦EmberJS发布1.0版本，你就会开始看到更多的第三方附加组件。由于EmberJS，特别是EmberJS的DS（DataStore）变化如此迅速，除非你完全致力于使其与EmberJS / DS从一天到另一天的快速变化保持最新，否则开始创建WebSocketAdapter似乎有点过早。

- Wildhoney