阿里云赞助

WebSocket

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

<template>
<scroller>
<div>
<div style="background-color: #286090">
<text class="title" style="height: 80px ;padding: 20px;color: white">websocket</text>
</div>
<input type="text" placeholder="please input message to send" class="input" autofocus="false" value="" @change="onchange" @input="oninput" ref="input"/>
<div style="flex-direction: row; justify-content: center;">
<text class="button" @click="connect">connect</text>
<text class="button" @click="send">send</text>
<text class="button" @click="close">close</text>
</div>
<div style="background-color: lightgray">
<text class="title" style="height: 80px ;padding: 20px;color: black">method = send</text>
</div>
<text style="color: black;height: 80px">{{sendinfo}}</text>
<div style="background-color: lightgray">
<text class="title" style="height: 80px ;padding: 20px;color: black">method = onopen</text>
</div>
<text style="color: black;height: 80px">{{onopeninfo}}</text>
<div style="background-color: lightgray">
<text class="title" style="height: 80px ;padding: 20px;color: black">method = onmessage</text>
</div>
<text style="color: black;height: 400px">{{onmessage}}</text>
<div style="background-color: lightgray">
<text class="title" style="height: 80px ;padding: 20px;color: black">method = onclose</text>
</div>
<text style="color: black;height: 80px">{{oncloseinfo}}</text>
<div style="background-color: lightgray">
<text class="title" style="height: 80px ;padding: 20px;color: black">method = onerror</text>
</div>
<text style="color: black;height: 80px">{{onerrorinfo}}</text>
<div style="background-color: lightgray">
<text class="title" style="height: 80px ;padding: 20px;color: black">method = close</text>
</div>
<text style="color: black;height: 80px">{{closeinfo}}</text>
</div>
</scroller>
</template>
<style scoped>
.input {
font-size: 40px;
height: 80px;
width: 600px;
}
.button {
font-size: 36px;
width: 150px;
color: #41B883;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
border-width: 2px;
border-style: solid;
margin-right: 20px;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
</style>
<script>
var websocket = weex.requireModule('webSocket')
export default {
data () {
return {
connectinfo: '',
sendinfo: '',
onopeninfo: '',
onmessage: '',
oncloseinfo: '',
onerrorinfo: '',
closeinfo: '',
txtInput:'',
navBarHeight: 88,
title: 'Navigator',
dir: 'examples',
baseURL: ''
}
},
methods: {
connect:function() {
websocket.WebSocket('ws://echo.websocket.org','');
var self = this;
self.onopeninfo = 'connecting...'
websocket.onopen = function(e)
{
self.onopeninfo = 'websocket open';
}
websocket.onmessage = function(e)
{
self.onmessage = e.data;
}
websocket.onerror = function(e)
{
self.onerrorinfo = e.data;
}
websocket.onclose = function(e)
{
self.onopeninfo = '';
self.onerrorinfo = e.code;
}
},
send:function(e) {
var input = this.$refs.input;
input.blur();
websocket.send(this.txtInput);
this.sendinfo = this.txtInput;
},
oninput: function(event) {
this.txtInput = event.value;
},
close:function(e) {
websocket.close();
},
},
}
</script>

Have a try

Apache Incubator
Disclaimer: Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.


ApacheCopyright(c) 2017 The Apache Software Foundation. Licensed under the Apache License, Version 2.0