EmberJS global websocket connection

2019-08-30 10:23发布

问题:

Im using EmberJS and im trying to get data from the backend using websocket (socket.io) so i've set this Application Route

  App.ApplicationRoute = Ember.Route.extend(
  setupController: (controller, data) ->
    store  = @get 'store'
    socket = io.connect "http://localhost:4000/orders" ## Line 4
    socket.on "new_order", (order) ->
      store.load(App.Order, order)
    socket.on "new_billing", (bill) ->
      store.load(App.Bill, bill)
    socket.on "connected", ->
      console.log "Ready"
  model: ->
    return { title: "Ordenes" }
  actions:
    markAsDone: (type, type_id) ->
      # Send value to backend
      socket.emit "confirm_" + type,                    ## Line 16
        id: type_id
      # Find record by id
      if type == "order"
        record = App.Order.find(type_id)
        transition = "orders"
      else if type == "bill"
        record = App.Bill.find(type_id)
        transition = "bills"
      # Delete from store
      record.then( (r) ->
        r.deleteRecord()
      )
      # Display list of record type
      @transitionTo(transition)
)

on line 4 the connection is being set and object are being fetched when i hit "/", but after i enter a route "/orders" object are not being fetched anymore, and on line 16 in the code above, i cant use the socket variable

Uncaught ReferenceError: socket is not defined

Is there a better way to manage this ?

回答1:

so the correct way to use a reusable socket is setting it inside the Store

App.Store = DS.Store.extend(
  revision: 12
  adapter: adapter
  socket: io.connect "http://localhost:4000/orders"
)

so then i can access to it inside any part of the code using

socket = @get 'store.socket'


回答2:

socket is out of scope once you've hit the markAsDone method, you can set a reference to it on the controller and retrieve it later (pardon my botched coffeescript)

  App.ApplicationRoute = Ember.Route.extend(
  setupController: (controller, data) ->
    store  = @get 'store'
    socket = io.connect "http://localhost:4000/orders" ## Line 4
    ///////////////////////////////////////////////////////////////////////////
    /////////////////////////////////////////////////////////////////////////// 
    controller.set 'socket', socket
    socket.on "new_order", (order) ->
      store.load(App.Order, order)
    socket.on "new_billing", (bill) ->
      store.load(App.Bill, bill)
    socket.on "connected", ->
      console.log "Ready"
  model: ->
    return { title: "Ordenes" }
  actions:
    markAsDone: (type, type_id) ->
      ///////////////////////////////////////////////////////////////////////////
      ///////////////////////////////////////////////////////////////////////////
      socket = @get 'controller.socket'
      # Send value to backend
      socket.emit "confirm_" + type,                    ## Line 16
        id: type_id
      # Find record by id
      if type == "order"
        record = App.Order.find(type_id)
        transition = "orders"
      else if type == "bill"
        record = App.Bill.find(type_id)
        transition = "bills"
      # Delete from store
      record.then( (r) ->
        r.deleteRecord()
      )
      # Display list of record type
      @transitionTo(transition)
)