如何快速搞定websocket

• 2021 年 2 月 18 日
• 筆記
• FED, Websocket

5 个步骤快速掌握websocket消息发送和接收

1. 获取您的 appkey

先注册一个账号，登录后，创建一个应用，就能得到您的 appkey。
详情见 获取开发者账号和 appkey

2. 客户端集成 irealtime.js

直接在页面中引用

<script
  type="text/javascript"
  src="//irealtime.cn/irealtime-1.0.1.js"
></script>

npm 安装

npm install --save irealtime
import IRealTime from 'irealtime';

下载到本地

下载地址 1

3. 初始化 irealtime

使用之前获取的 appkey 初始化 irealtime 对象，如果您的客户端需要发送消息，请使用 common key。如果您的客户端只需要接收消息，不需要发送消息，可以使用 subscriber key。

提示:
一个页面或一个单页面应用，一个小程序或者一个 APP, 只需要初始化一个 irealtime 对象

<script
  type="text/javascript"
  src="//irealtime.cn/irealtime-1.0.1.js"
></script>

<script type="text/javascript">
  var realTime = new IRealTime({
    host: 'hk.irealtime.cn',
    appkey: '' // common key or subscribe key,
    onConnected: function() {
      console.log('连接成功...')
    },
    onDisconnected: function() {
      console.log('连接断开...')
    },
    onConnectFailed: function(error) {
      console.log('连接失败...', error)
    },
  })
</script>

4. 订阅消息（接收）

在发送消息之前，您需要先完成订阅操作, 来准备接收消息。

什么是 channels？
根据您的业务需求来设定，channels是一个数组参数，只能包含数字大小写字母并且不能超过256位，通道需要和消息的发送端保持一致，就可以收到消息。

realTime.subscribe({
  channels: ['myChannel01', 'myChannel02'], //可配置多个channel
  onMessage: function(data) {  // 这个回调函数是用来接收消息的
    console.log(data)
    // data的数据结构如下
    /*{
      channel: "myChannel01"         // 哪个通道的消息
      message: "hello irealtime"     // 消息内容
      time: 1612403977920            // 发送的时间毫秒数
      userId: ""                     // 带userId的连接，如果没有就是空字符串
    }*/
  },
  onSuccess: function(res) {
    console.log('订阅成功...', res)
  },
  onFailed: function(error) {
    console.log('订阅失败...', error)
  },
})

5. 发送消息

发送时，您的 channel 必须和上一步订阅的 channel 一致，才可以成功的接收消息。不论是服务端还是客户端，您都可以使用 irealtime 提供的相应代码来完成发送操作。同时也可以使用 curl 直接在控制台调用 irealtime API 来测试 irealtime 的 publish 接口。

realTime.publish({
  channel: 'myChannel01',
  message: 'hello irealtime',
  onSuccess: function(res) {
    console.log('success:', res)
  },
  onFailed: function(error) {
    console.log('failed:', error)
  },
})

相信通过上边几个步骤，您已经成功的完成 irealtime 消息的发送和接收。更多详情，可以参考 irealtime 官方文档
遇到技术问题也可以与 irealtime 技术支持取得联系。