WebSocket 教程

了解如何使用 WebSocket

通过本节，你将学会：

  • 创建 WebSokcet 对象
  • 使用 WebSocket 发送消息
  • 使用 WebSocket 接收消息
  • 关闭 WebSocket 连接

使用方法

创建连接

为了使用 WebSocket 协议通信，你需要需先通过websocketfactory.create()创建一个 WebSocket 对象；这将会自动地尝试建立与服务器的连接。

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

参数说明：

参数名说明
url要连接的 URL。这应当是 WebSocket 服务器会响应的 URL。
header附加请求头。这些键值对会被添加到请求头中，服务器可以从中读取信息。
protocols一个或多个协议字符串。这些字符串用来指定子协议，这样一个服务器就可以实现多个 WebSocket 子协议（比如你可能希望一个服务器可以根据指定的 protocol 来应对不同的互动情况）。

向服务器发送数据

一旦你的连接打开完成，你就可以向服务器发送数据了。对每一个要发送的消息使用 WebSocket 对象的 send() 方法：

  1. ws.send({
  2.   data:'send message',
  3.   success:function(){
  4.     console.log(`send success`)
  5.   },
  6.   fail:function(){
  7.     console.log(`send fail`)
  8.   }
  9. })

接收服务器发送的消息

WebSockets 是一个基于事件的 API；收到消息的时候，一个 "message" 消息会被发送到 onmessage 函数。为了开始监听传入数据，可以进行如下操作：

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

关闭连接

当你不需要再用 WebSocket 连接了,调用 WebSocket 对象的 close()方法：

  1. ws.close({
  2.   code:1000,
  3.   reason:'close as normal',
  4.   success:function(){
  5.     console.log(`close success`)
  6.   },
  7.   fail:function(){
  8.     console.log(`close fail`)
  9.   }
  10. })

参数说明：

参数名说明
code关闭的状态码。如果不填写默认值为1000。
reason连接关闭的原因。

示例代码如下：

  1. <template>
  2.   <div class="doc-page">
  3.     <div class="item-container">
  4.       <input type="button" class="btn" onclick="create" value="创建websocket实例" />
  5.       <input type="text" class="input-text" onchange="handleChange" placeholder="请输入" />
  6.       <input type="button" class="btn" onclick="send" value="发送消息" />
  7.       <input type="button" class="btn" onclick="close" value="关闭连接" />
  8.     </div>
  9.   </div>
  10. </template>
  12. <script>
  13.   import prompt from '@system.prompt'
  14.   import websocketfactory from '@system.websocketfactory'
  16.   let ws = null
  17.   let isOpen = false
  18.   export default {
  19.     private: {
  20.       message: ''
  21.     },
  22.     create() {
  23.       //创建websocket实例
  24.       ws = websocketfactory.create({
  25.         url: 'wss://echo.websocket.org',
  26.         header: {
  27.           'content-type': 'application/json'
  28.         },
  29.         protocols: ['protocol']
  30.       })
  32.       //连接打开事件的监听
  33.       ws.onopen = function () {
  34.         isOpen = true
  35.         prompt.showToast({
  36.           message: 'connect open'
  37.         })
  38.       }
  40.       //消息事件的监听
  41.       ws.onmessage = function (data) {
  42.         prompt.showToast({
  43.           message: `message is ${data.data}`
  44.         })
  45.       }
  47.       //错误事件的监听
  48.       ws.onerror = function () {
  49.         prompt.showToast({
  50.           message: 'error'
  51.         })
  52.       }
  54.       //关闭连接事件的监听
  55.       ws.onclose = function (data) {
  56.         prompt.showToast({
  57.           message: 'onclose:data.code = '+data.code+', data.reason = '+data.reason+', data.wasClean = '+data.wasClean
  58.         })
  59.       }
  60.     },
  61.     handleChange(e) {
  62.       this.message = e.value
  63.     },
  64.     //发送消息
  65.     send() {
  66.       isOpen && ws.send({
  67.         data: this.message,
  68.         success: function () {
  69.           prompt.showToast({
  70.             message: 'send success'
  71.           })
  72.         },
  73.         fail: function () {
  74.           prompt.showToast({
  75.             message: 'send fail'
  76.           })
  77.         }
  78.       })
  79.     },
  80.     //关闭连接
  81.     close() {
  82.       isOpen && ws.close({
  83.         success: function () {
  84.           isOpen = false
  85.           prompt.showToast({
  86.             message: 'close success'
  87.           })
  88.         },
  89.         fail: function () {
  90.           prompt.showToast({
  91.             message: 'close fail'
  92.           })
  93.         }
  94.       })
  95.     }
  96.   }
  97. </script>

多实例

WebSocket 支持创建多个实例，如果开发者要创建多个 WebSocket 实例，需要调用多次websocketfactory.create()方法，并自行管理创建的 WebSocket 对象。