Vue中使用websoket

Posted 2021-08-31 程序媛董董

项目需要实现移动端的客服聊天界面，类似微信的聊天界面，需要做到实时通讯，所以使用了websocket

一、什么是websoket

1. websoket是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通讯
2. websoket可以建立服务器主动向客户端发送数据，实现双向连接通信，并且建立持久的通信

二、如何使用

mounted() {
    this.initWebSocket();
}
methods:{
	//点击发送消息按钮
	webchat_sendmsg(){
        if(this.inputContent != '') {
             const message = {
                 ...  //后台需要的数据格式
             }
             this.websocketSend(this.inputContent);//将消息发送到后台
             this.infoList.push(message); //将输入的消息push到消息列表
             console.log(this.infoList);
             this.inputContent = ""
         }
         console.log('点击发送');
     },
	initWebSocket() {
	     //后台接口访问
	     let domianURL = 'ws://127.0.0.1/websoket/';
	     var url = domianURL+'需要拼接的参数';
	     console.log(url);
	     this.websock = new WebSocket(url);
	     this.websock.onopen = this.websocketOnopen;
	     this.websock.onerror = this.websocketOnerror;
	     this.websock.onmessage = this.websocketOnmessage;
	     this.websock.onclose = this.websocketOnclose;
	 },
	 websocketOnopen() {
	     console.log("WebSocket连接成功");
	     //心跳检测重置
	     //this.heartCheck.reset().start();
	 },
	 websocketOnerror(e) {
	     console.log("WebSocket连接发生错误",e);
	     // this.reconnect();
	 },
	 websocketOnmessage(e) {
	     console.log('监听关闭' + e)
	     console.log("-----接收消息-------",e.data); //获取接收到的消息
	     let message= eval("(" + e.data + ")"); //解析对象
	 },
	 websocketOnclose(e) {
	     console.log("connection closed (" + e + ")");
	     // this.reconnect();
	 },
	 websocketSend(text) { // 向后台发送的消息
	     try {
	         this.websock.send(text);
	         console.log('发送的消息'+text);
	     } catch (err) {
	         console.log("send failed (" + err + ")");
	     }
	 },
}

三、手动关闭websocket

this.websock.close()

基本上的通信就实现啦，有什么疑问欢迎讨论 ：）