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

Have a try