Vue 项目中使用websocket

在vue项目中使用websocket

websocket相关文档传送门

https://github.com/websockets/ws

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

1.首先init一个websocket

https 使用 wss， http 使用 ws

data(){
    websocketObj: null,
    wsHeartflag: false,
    reconnectTime: 0
},
created(){
    this.initWebsocket();
},
methods: {
    initWebsocket(){
        if (websocket in window) {
            this.webSocketObj = new WebSocket(
                "wss://"+newApi+"/websocket?sid="+userToken
            );
            this.webSocketObj.onmessage = this.onMessage
            this.webSocketObj.onopen = this.onOpen
            this.webSocketObj.onerror = this.onError
            this.webSocketObj.onclose = this.onClose
        }  
    }
}

2.写上对应websocket方法

onOpen() {
    if (this.webSocketObj.readyState === 1) {
        //- readyState 等于1 的时候建立链接成功
        this.wsHeartflag = true;
        this.webSocketObj.send("13123123");
        this.reconnectTime = 0;
    }
},
timingHeart() {
    // 心跳检测  每4.5分钟发送一次 
    if (this.wsHeartflag) {
        this.webSocketObj.send('123123123');
    }
    this.wsHeart = setTimeout(() => {
        this.timingHeart();
    }, 100 * 1000); // 100s心跳
},
onMessage(evt) {
    var received_msg = evt && JSON.parse(evt.data);
    if (received_msg.code === '1') {
        // 支付成功
        // this.$toast('恭喜您，支付成功，已升级成VIP');
        this.onClose();
    } else {
        // 支付失败
        this.showSuccessPop = false;
    }
},
onError() {
    // 链接失败，进行重连
    clearTimeout(this.wsHeart);
    this.wsHeartflag = false;
    if (this.reconnectTime <= MAX_CONNECT) {
        setTimeout(() => {
            this.onOpen();
            this.reconnectTime+=1;
        }, 5000);
    } else {
        this.$toast('抱歉，暂时无法连接到聊天服务器，请稍后再试');
        this.onClose();
    }
},
onClose() {
    this.wsHeartflag = false;
    this.webSocketObj && this.webSocketObj.close && this.webSocketObj.close();
},

3.功能基本完备，如果api要走nginx的话，需要另外做处理：

配置ngnix

server: {
    localhost / {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection  "upgrade";
    }
}            

自此 websocket 已经可以使用，详情点击上面传送门详细了解

码农进阶题库,每天一道面试题 or Js小知识 https://www.javascriptc.com/interview-tips/

❤️ 看完两件小事

如果你觉得这篇文章对你挺有启发，我想请你帮我两个小忙：

把这篇文章分享给你的朋友 / 交流群，让更多的人看到，一起进步，一起成长！

关注公众号 「IT平头哥联盟」，公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网 - 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容