vue组件websocket服务器,vue 使用WebSocket 连接

什么是WebSocket？

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒)，由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

vue 怎么使用WebSocket连接(这里使用组件)

// npm install --save reconnecting-websocket

import ReconnectingWebSocket from 'reconnecting-websocket';

vue页面注销时要关闭链接

// 页面注销时候调用 避免连接错误

destroyed() {

this.closeWebSocket();

},

创建WebSocket

mounted() {

// 创建 websocket 链接

this. createWebsocket();

},

methods: {

// 创建 websocket 链接

createWebsocket() {

const httpURL = process.env.VUE_APP_DOMAIN;

this.websocket = new ReconnectingWebSocket(`wss://${httpURL}custom_api/websocket/queue/${this.coding}`);

// 连接发生错误的回调方法

this.websocket.onerror = this.websocketOnerror;

// 连接成功建立的回调方法

this.websocket.onopen = this.websocketOnopen;

// 接收到消息的回调方法

this.websocket.onmessage = this.websocketOnmessage;

// 连接关闭的回调方法

this.websocket.onclose = this.websocketOnclose;

// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。

this.websocket.onbeforeunload = this.websocketOnbeforeunload;

},

// 连接发生错误的回调方法

websocketOnerror() {

console.log('连接发生错误的回调方法');

},

// 连接成功建立的回调方法

websocketOnopen() {

console.log('连接成功建立的回调方法');

},

// 接收到消息的回调方法

websocketOnmessage(event) {

const data = JSON.parse(event.data);

console.log('接收到消息的回调方法', data);

},

// 连接关闭的回调方法

websocketOnclose() {

console.log('连接关闭的回调方法');

},

// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常

websocketOnbeforeunload() {

this.closeWebSocket();

console.log('监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常');

},

// 关闭WebSocket连接

closeWebSocket() {

this.websocket.close();

},

}