Vue 中使用 WebSocket

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();
}
}
}

本文标题:Vue 中使用 WebSocket

文章作者:晨星

发布时间:2019年09月22日 - 06:09

最后更新:2020年09月16日 - 08:09

原始链接:https://www.mls-tech.info/web/vue/vue-use-websocket/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。