转载

ActionCable 源码阅读笔记-前端部分-1

本节将会简单阐述如何使用 ActionCable 收发消息，着重前端部分。

Cable.Consumer

基本概念

负责建立到服务端的连接。在连接建立之后， Cable.ConnectionMonitor 会通过心跳检测来确保连接的状态。 Consumer 实例对象通过 createSubscription 方法来建立一个连接到特定频道的订阅。

例子

window.App = {};
App.cable = Cable.createConsumer('ws://example.com/accounts/1');
App.appearance = App.cable.subscriptions.create('AppearanceChannel');

这样就可以通过 App.appearance 来发送消息到服务器，同样其也可以接收来自服务器的消息。

Cable.Subscription

对应着服务端的 Channel 实例，通过提供 callbacks 、 methods 来实现远程过程调用（RPC, Remote Procedure Calls）。

如果你在浏览器创建了一个 AppearanceChannel 的 subcription ，那么 subscription 的调用将会直接等同于调用服务端的 AppearanceChannel 示例里相应的方法。

例子

// 前端
App.appearance = App.cable.subscription.create('AppearanceChannel', {
    connected: ->
        console.info("连接已经建立好啦");

    received: (data) ->
        console.info("接收到了来自服务端的消息");

    appear: (data) ->
        this.perform('appear', data);
});

# 服务端代码
class AppearanceChannel < ApplicationCable::Channel
  def subscribed
    stop_all_streams
    stream_from 'appearance_channel'
  end

  def unsubscribed
    stop_all_streams
  end

  def appear data
    # do something
  end
end

上面中，如果你这么使用

App.appearance.appear({ message: "Hello, John" });

那么对应着服务端， appear 方法将会调用，并且你可以用过 ActionCable.server.broadcast('appearance_channel', message: 'Hello, Katy') 来响应，这样浏览器端的 received 回调将会被调用。

原文 http://www.justqyx.me/blog/2016/08/13/actioncable-sourcecode-frontend-part-1-hello/

正文到此结束

所属分类：编程技术

本文标签： 代码 Action cat message http ip example remote Connection 服务器 consumer 实例 App ORM
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

ActionCable 源码阅读笔记-前端部分-1

Cable.Consumer

基本概念

例子

Cable.Subscription

例子

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流