Vue里怎么使用socket?(websocket)

原创已于 2022-04-13 10:21:52 修改 · 3.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #websocket #socket

于 2021-08-06 10:15:53 首次发布

学习篇专栏收录该内容

36 篇文章

订阅专栏

本文介绍了如何在Vue应用中封装和使用WebSocket，步骤包括创建WebSocket实例、事件监听和消息发送。重点展示了如何通过Socket.js处理socket连接、消息传递及错误处理。

第一步：封装socket.js

import { Message } from 'iview';

class Socket {
        constructor (wsurl, binaryType){
                this.wsurl = wsurl
                this.websock = null
                this.binaryType = binaryType
                this.initWebSocket()
        }
        initWebSocket(){
                var that = this
                this.websock = new WebSocket(this.wsurl)
                if(this.binaryType){
                        this.websock.binaryType = this.binaryType
                }
                this.websock.onmessage = function(e){
                        that.webMessage(e)
                }
                this.websock.onclose = function(e){
                        that.webClose(e)
                }
                this.websock.onopen = function(){
                        that.webOpen()
                }
                this.websock.onerror = function(){
                        Message.error('websocket连接中断！请刷新重试')
                }
        }
        sendSock(agentData, callback){
                this.callback = callback
                if(agentData){
                        if（this.websock.readyState === this.websock.OPEN）{
                                this.webSend(agentData)
                        } else if(this.websock.readyState === this.websock.CONNECTING){
                                let that = this
                                setTimeout(function(){
                                        that.webSend(agentData)
                                }, 300)
                        }else{
                                this.initWebSocket()
                                let that = this
                                setTimeout(function(){
                                        that.webSend(agentData)
                                }, 500)
                        }
                }
        }       
        webMessage(e){
                this.callback(e)
        }
        webSend(agentData){
                this.websock.send(agentData)        
        }
        webClose(e){
                this.websock.close()
        }
        webOpen(){}
}

export default Socket

第二步：在vue文件里引入使用

socket的使用

//引入socket
import socket from "@/libs/socket.js"; //根据自己放的路径来引入socket

methods:{
        //socket操作
        initWebsocket(){
                console.log("初始化websocket");
                if(!this.websocket){
                        this.websocket = new socket(
                                //这里填写要请求socket的url字符串
                        )
                        this.websocket.sendSock("", this.websocketonmessage);
                }
        },
        websocketonmessage(e){
                console.log(e.data)
        },
        closeWebSocket(){
                if(this.websocket != null){
                        this.websocket.webClose();
                }
        }
},
mounted(){
        this.initWebsocket()
},
beforeDestroy(){
        this.closeWebSocket()
}