如何快速搞定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 技術支援取得聯繫。