背景:在vue中使用websocket其实非常简单,建立对话,发送消息,断开连接,如果连接失败需要接收错误信息并断开连接。
那么先来简单介绍一下在vue中使用websocket的代码片,然后再介绍如何将websocket封装到外部在window中全局调用。
一、websokcet简介
1.websocket是一个基于在TCP的全双工通信协议,它的协议为ws或者wss,即对应http协议和https协议。
2.websocket只需要建立一次连接,即可收发消息,直到断开连接。
二、在vue中使用websocket
在一个.vue文件中,定义方法
handleWebsocket(){
let ws = new WebSocket("ws://xxx.xxx.x.xxx:9090")//ws根据需要更改
//打开websocket
ws.onopen = (e) => {
console.log('open------------------',e)
//打开后发送数据,需要写在open里,否则在对话没有打开之前无法执行send
let data = {
'op':'message'
}
ws.send(JSON.stringify(data)) //send括号中的内容可以根据实际情况进行更改
}
//接收消息,e为接收到的消息,一般是存在e.data中,可以打印出来看一下e中有什么
ws.onmessage = (e) => {
console.log('message----------------',e)
console.log(JSON.parse(e.data))
}
//错误回调,如遇到错误则让连接自动关闭
ws.onerror = (e) => {
ws.close()
console.log('建立连接失败--------------',e)
}
}
三、将websocket封装在js中并保存与window中,在.vue页面中调用
1.在项目中新建一个工具文件,我是存放于src下新建的util的文件夹中,起名为websocket.js
websocket.js
var websocketStore = {} //定义一个空的对象
websocketStore.data = ""//存放接收到数据
websocketStore.ws = "" //存储ws
// 初始化建立连接
websocketStore.initWebsocket = () => {
websocketStore.ws = new WebSocket("ws://xxx.xxx.x.xxx:9090");
websocketStore.ws.onopen = function (event) {
console.log("open...------------------------------------------");
console.log(event);
let a = {
"op": "subscribe"
}
websocketStore.ws.send(JSON.stringify(a))
};
websocketStore.ws.onmessage = (e) => {
console.log("message===============")
let data = e.data
data = JSON.parse(data)
websocketStore.data = data
}
websocketStore.ws.onerror = function (event) {
console.log("建立连接--失败");
//关闭连接
websocketStore.ws.close();
};
}
//发送消息并接受(这里是如果有多个消息需要发送才去定义的一个方法)
websocketStore.sendMsg = (e) => {
websocketStore.ws.send(e)
websocketStore.ws.onmessage = (e) => {
console.log("message...");
console.log(e)
}
}
//断开连接(如果需要在某个实际情况下需要手动断开连接,比如页面销毁,页面关闭等需要去触发一次点开连接定义的方法)
websocketStore.handleOff = () => {
websocketStore.ws.close();
console.log("close-=-=--=-=-=-=-=-=")
websocketStore.data=""
}
export default websocketStore;
2.在index.vue中将webswocket.js注册到window中
即在项目最开始初始化的时候注册
1.在script中引入websocket
import websocketStore from '../utils/websocket';
2.在index.vue的created中写下如下代码
created() {
window.websocketStore = websocketStore;
},
3.使用websocket
在需要使用websocket的.vue页面使用,代码如下
//点击按钮连接
connectLine(){
window.websocketStore.initWebsocket(); //建立websocket连接并发送消息,initWebsocket方法在websocket.js文件中定义,可以根据自己的需求进行修改
let data = window.websocket.data // data为websocket中请求回来返回的data
}
//手动断开连接
turnOffLine(){
window.websocketStore.handleOff()
}
注意:
服务端如果在建立连接后轮询发消息,那么在websocket.js中onmessage方法中可以打印出轮询的消息,如果需要在页面中使用,可以在.vue页面中使用定时器轮询拿onmessage存储的消息,或者直接在.vue页面中使用websocket,无需再声明一个js文件。如何使用,根据你的情况而定。