快應(yīng)用 使用WebSocket

了解如何使用 WebSocket

通過本節(jié)，你將學(xué)會(huì)：

• 創(chuàng)建連接
• 向服務(wù)器發(fā)送數(shù)據(jù)
• 接收服務(wù)器發(fā)送的消息
• 關(guān)閉連接

使用方法

創(chuàng)建連接

為了使用 WebSocket 協(xié)議通信，你需要需先通過?websocketfactory.create()?創(chuàng)建一個(gè) WebSocket 對象；這將會(huì)自動(dòng)地嘗試建立與服務(wù)器的連接。

ws = websocketfactory.create({
  url: 'wss://echo.websocket.org',
  header: {
    'content-type': 'application/json'
  },
  protocols: ['protocol']
})

參數(shù)說明：

向服務(wù)器發(fā)送數(shù)據(jù)

一旦你的連接打開完成，你就可以向服務(wù)器發(fā)送數(shù)據(jù)了。對每一個(gè)要發(fā)送的消息使用 ?WebSocket? 對象的 ?send()? 方法：

ws.send({
  data:'send message',
  success:function(){
    console.log(`send success`)
  },
  fail:function(){
    console.log(`send fail`)
  }
})

接收服務(wù)器發(fā)送的消息

WebSockets 是一個(gè)基于事件的 API；收到消息的時(shí)候，一個(gè) "message" 消息會(huì)被發(fā)送到 onmessage 函數(shù)。為了開始監(jiān)聽傳入數(shù)據(jù)，可以進(jìn)行如下操作：

ws.onmessage = function (data) {
  console.log(`message is ${data.data}`)
}

關(guān)閉連接

當(dāng)你不需要再用 WebSocket 連接了,調(diào)用 ?WebSocket? 對象的 ?close()?方法：

ws.close({
  code:1000,
  reason:'close as normal',
  success:function(){
    console.log(`close success`)
  },
  fail:function(){
    console.log(`close fail`)
  }
})

參數(shù)說明：

示例代碼如下：

<template>
  <div class="doc-page">
    <div class="item-container">
      <input type="button" class="btn" onclick="create" value="創(chuàng)建websocket實(shí)例" />
      <input type="text" class="input-text" onchange="handleChange" placeholder="請輸入" />
      <input type="button" class="btn" onclick="send" value="發(fā)送消息" />
      <input type="button" class="btn" onclick="close" value="關(guān)閉連接" />
    </div>
  </div>
</template>

<script>
  import prompt from '@system.prompt'
  import websocketfactory from '@system.websocketfactory'

  let ws = null
  let isOpen = false
  export default {
    private: {
      message: ''
    },
    create() {
      //創(chuàng)建websocket實(shí)例
      ws = websocketfactory.create({
        url: 'wss://echo.websocket.org',
        header: {
          'content-type': 'application/json'
        },
        protocols: ['protocol']
      })

      //連接打開事件的監(jiān)聽
      ws.onopen = function () {
        isOpen = true
        prompt.showToast({
          message: 'connect open'
        })
      }

      //消息事件的監(jiān)聽
      ws.onmessage = function (data) {
        prompt.showToast({
          message: `message is ${data.data}`
        })
      }

      //錯(cuò)誤事件的監(jiān)聽
      ws.onerror = function () {
        prompt.showToast({
          message: 'error'
        })
      }

      //關(guān)閉連接事件的監(jiān)聽
      ws.onclose = function (data) {
        prompt.showToast({
          message: 'onclose:data.code = '+data.code+', data.reason = '+data.reason+', data.wasClean = '+data.wasClean
        })
      }
    },
    handleChange(e) {
      this.message = e.value
    },
    //發(fā)送消息
    send() {
      isOpen && ws.send({
        data: this.message,
        success: function () {
          prompt.showToast({
            message: 'send success'
          })
        },
        fail: function () {
          prompt.showToast({
            message: 'send fail'
          })
        }
      })
    },
    //關(guān)閉連接
    close() {
      isOpen && ws.close({
        success: function () {
          isOpen = false
          prompt.showToast({
            message: 'close success'
          })
        },
        fail: function () {
          prompt.showToast({
            message: 'close fail'
          })
        }
      })
    }
  }
</script>

多實(shí)例

WebSocket 支持創(chuàng)建多個(gè)實(shí)例，如果開發(fā)者要?jiǎng)?chuàng)建多個(gè) WebSocket 實(shí)例，需要調(diào)用多次?websocketfactory.create()?方法，并自行管理創(chuàng)建的 WebSocket 對象。