WebSocket是H5中的一个新通讯标准，与传统的HTTP（通讯）模型相比，WebSocket支持长连接，提供双向的数据通讯，为需要支持实时或准实时通讯的应用(如：股票，消息推送等)提供了非常强大的技术手段。本文提供的就是在Angular中使用WebSocket技术的一个简要的指引。
在本文中，我们以一个接收服务端推送消息的界面为例来演示在Vue中如何使用WebSocket。
新建一个名为 MessagePage 的组件，在组件中放置一个 textarea，用来显示从服务端收到的推送消息。
template 部分的代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div>
<div>
<div>My Messages</div>
<div>
<div>
<div>
<button v-on:click="startListener">Start Listener</button>
</div>
<div>
<textarea cols="20" rows="10" v-model="msgs" defaultValue/>
</div>
</div>
</div>
</div>
</div>
|
在 script 部分，我们直接使用 HTML5 标准中定义的 WebSocket 对象，代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| export default {
name: "MessagePage",
data() {
return {
msgs: "",
ws: undefined
};
},
methods: {
updateMsg() {
if (this.ws === undefined || this.ws.closed) {
this.ws = new WebSocket('<your server url>');
this.ws.onopen = () => {
console.log("Connection Successfully.")
};
this.ws.onmessage = evt => {
console.log("Received data..." + evt.data);
this.msgs = this.msgs + evt.data + "\n"
};
this.ws.onclose = () => {
console.log("Connection Closed...")
};
}
},
startListener() {
this.updateMsg();
}
}
}
|