webSocket

webSocket

v0.12+

Summary

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

注意：

iOS和h5提供 WebSockets 的 protocol 默认实现，安卓使用需要提供自定义 adapter 实现，source:
- DefaultWebSocketAdapter.java;
- DefaultWebSocketAdapterFactory.java;
- 集成例子参考weex playground

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>
    13.   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>
    18.   19.   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>
    24.   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>
    29.   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>
    34.   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>
    39.   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>
    44.   45.     </div>
    46.   47.   </scroller>
    48. </template>
    49.   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>
    70.   71.   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