vue组件websocket服务器,vue全局使用WebSocket

vue接入websocket

首先就是网上的写法有很多但是 都是需要创建一个对象进行相关的状态回调，有的是需要创建一个初始化方法进行相关的状态回调，然后看的我就一句话 都挺好的，反正就是需要你去创建对象接收发送消息，然后我就在这写一个全局的使用的，因为我觉得大部分就是作为消息推送来用所以全局来用蛮好的。

websocket是什么：

首先是是基于TCP的 全双工 通信的协议 然后就是websoket是通过客户端向服务器建立连接，保持客户端和服务器端双向的通信的过程。相互收发消息

websocket的使用相关实例状态：

1>readyState属性返回实例对象的当前状态。共四种：

CONNECTING：值为0，表示正在连接。

OPEN：值为1，表示连接成功，可以通信了。

CLOSING：值为2，表示连接正在关闭。

CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

2> onopen： 实例对象的onpen属性，用于指定连接成功后的回调函数。

3>onclose: 实例对象的onclose属性，用于指定连接关闭后的回调函数。

4>onmessage: 实例对象的onmessage属性，用于指定收到服务器 数据后的回调函数。

5>send:实例对象的send()方法用于向服务器发送数据

具体使用:

1>首先创建一个全局文件: 在main.js 里面进行引入

// global.js 文件

export default {

ws: {},

setWs: function(newWs) {

this.ws = newWs

}

}

// main.js 文件

import global from './xx/global.js'

Vue.prototype.global = global

2> 在APP.vue 里面进行初始化 (回调有多个状态 但是只写了连接成功和失败的方法)

//app.vue

oncerate(){

//初始化方法

this.localSocket

}

methods(){

//app.vue

localSocket() {

let that = this;

if ("WebSocket" in window) {