webSocket

v0.12+

Summary

WebSockets 是一种先进的技术, 这使得在用户的 H5/iOS/Android 和一个服务器之间打开一个的交互式通信会话成为可能, 有了这个 API，你可以向服务器发送消息, 并接收事件驱动的响应, 无需轮询服务器的响应

注意：

API

WebSocket(url, protocol)

创建 WebSockets，并连接服务器

Arguments

  • url {string}: 表示要连接的 URL;
  • protocol {string}: WebSockets 协议

send(data)

通过WebSocket连接向服务器发送数据

Arguments

  • data{string}:要发送到服务器的数据

close(code,reason)

关闭 WebSockets 的链接

Arguments

  • code {number}: 关闭连接的状态号.
  • reason {string}: 关闭的原因

onopen(options)

链接打开的监听

Arguments

  • options {object}: 一个空的对象

onmessage(options)

消息事件的监听器

Arguments

  • options {object}: 服务器返回的消息对象
    • data {string}: 监听器接收的到的消息

onclose(options)

关闭事件的监听器

Arguments

  • options {object}: 监听器接收到的对象
    • code {number}: 服务器返回关闭的状态码
    • reason {string}: 服务器返回的关闭原因
    • wasClean {boolen}: 是否完全关闭.

onerror(options)

错误事件的监听器

Arguments

  • options {object}: 错误信息的事件
    • data {string}: 监听器接收到的信息

Example

  1. <template>
  2.   <scroller>
  3.     <div>
  4.       <div style="background-color: #286090">
  5.         <text class="title" style="height: 80px ;padding: 20px;color: white">websocket</text>
  6.       </div>
  7.       <input type="text" placeholder="please input message to send" class="input" autofocus="false" value="" @change="onchange" @input="oninput" ref="input"/>
  8.       <div style="flex-direction: row; justify-content: center;">
  9.         <text class="button" @click="connect">connect</text>
  10.         <text class="button" @click="send">send</text>
  11.         <text class="button" @click="close">close</text>
  12.       </div>
  14.       <div style="background-color: lightgray">
  15.         <text class="title" style="height: 80px ;padding: 20px;color: black">method = send</text>
  16.       </div>
  17.       <text style="color: black;height: 80px">{{sendinfo}}</text>
  20.       <div style="background-color: lightgray">
  21.         <text class="title" style="height: 80px ;padding: 20px;color: black">method = onopen</text>
  22.       </div>
  23.       <text style="color: black;height: 80px">{{onopeninfo}}</text>
  25.       <div style="background-color: lightgray">
  26.         <text class="title" style="height: 80px ;padding: 20px;color: black">method = onmessage</text>
  27.       </div>
  28.       <text style="color: black;height: 400px">{{onmessage}}</text>
  30.       <div style="background-color: lightgray">
  31.         <text class="title" style="height: 80px ;padding: 20px;color: black">method = onclose</text>
  32.       </div>
  33.       <text style="color: black;height: 80px">{{oncloseinfo}}</text>
  35.       <div style="background-color: lightgray">
  36.         <text class="title" style="height: 80px ;padding: 20px;color: black">method = onerror</text>
  37.       </div>
  38.       <text style="color: black;height: 80px">{{onerrorinfo}}</text>
  40.       <div style="background-color: lightgray">
  41.         <text class="title" style="height: 80px ;padding: 20px;color: black">method = close</text>
  42.       </div>
  43.       <text style="color: black;height: 80px">{{closeinfo}}</text>
  45.     </div>
  47.   </scroller>
  48. </template>
  50. <style scoped>
  51.   .input {
  52.     font-size: 40px;
  53.     height: 80px;
  54.     width: 600px;
  55.   }
  56.   .button {
  57.     font-size: 36px;
  58.     width: 150px;
  59.     color: #41B883;
  60.     text-align: center;
  61.     padding-top: 25px;
  62.     padding-bottom: 25px;
  63.     border-width: 2px;
  64.     border-style: solid;
  65.     margin-right: 20px;
  66.     border-color: rgb(162, 217, 192);
  67.     background-color: rgba(162, 217, 192, 0.2);
  68.   }
  69. </style>
  72. <script>
  73.   var websocket = weex.requireModule('webSocket')
  74.   export default {
  75.     data () {
  76.       return {
  77.         connectinfo: '',
  78.         sendinfo: '',
  79.         onopeninfo: '',
  80.         onmessage: '',
  81.         oncloseinfo: '',
  82.         onerrorinfo: '',
  83.         closeinfo: '',
  84.         txtInput:'',
  85.         navBarHeight: 88,
  86.         title: 'Navigator',
  87.         dir: 'examples',
  88.         baseURL: ''
  89.       }
  90.     },
  91.     methods: {
  92.       connect:function() {
  93.         websocket.WebSocket('ws://echo.websocket.org','');
  94.         var self = this;
  95.         self.onopeninfo = 'connecting...'
  96.         websocket.onopen = function(e)
  97.         {
  98.           self.onopeninfo = 'websocket open';
  99.         }
  100.         websocket.onmessage = function(e)
  101.         {
  102.           self.onmessage = e.data;
  103.         }
  104.         websocket.onerror = function(e)
  105.         {
  106.           self.onerrorinfo = e.data;
  107.         }
  108.         websocket.onclose = function(e)
  109.         {
  110.           self.onopeninfo = '';
  111.           self.onerrorinfo = e.code;
  112.         }
  113.       },
  114.       send:function(e) {
  115.         var input = this.$refs.input;
  116.         input.blur();
  117.         websocket.send(this.txtInput);
  118.         this.sendinfo = this.txtInput;
  119.       },
  120.       oninput: function(event) {
  121.         this.txtInput = event.value;
  122.       },
  123.       close:function(e) {
  124.         websocket.close();
  125.       },
  126.     },
  127.   }
  128. </script>

Have a try