webSocket前端_websocket前端代码-CSDN博客

本文链接：https://blog.csdn.net/LoveZJC96/article/details/129010862

WebSocket是一种在单个TCP连接上实现全双工通信的协议，允许服务器主动向客户端推送数据。文章介绍了WebSocket的使用方法，包括构造函数、连接状态、事件监听（open、message、error、close）以及状态码。还提供了客户端创建和管理WebSocket连接的代码示例，包括心跳机制以保持连接的活跃性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是webSocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议。允许服务端主动向客户端推送数据。

2.如何使用webSocket

WebSocket 构造函数

WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。

代码如下：

 let ws = new WebSocket(网址);

2.websock事件：

1.open //连接

代码如下：

ws.onopen = function (res) {
                 console.log('······ 连接成功 ······')
                console.log(res);
            }

2.message //服务器发数据，客户端收到时触发

代码如上

3.error //连接错误时

代码如上

4.close //连接关闭时

代码如上

websock的状态码：

值为0，表示正在连接。

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

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

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

代码如下

ws.readyState

客户端发送数据

ws.send(发送的数据)

完整代码

             // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
             var userId = store.getters.userInfo.id; 
            //配置url           
             var url = window._CONFIG['domianURL'].replace("https://", "wss://").replace("http://", "ws://") + "/websocket/" + userId;

            if (process.env.NODE_ENV != 'production') {
            //console.log(process.env.NODE_ENV)
            url = url.replace('/api', '')
              }
            //获取token
            let token = Vue.ls.get(ACCESS_TOKEN)
            //websock配置token
            let ws = new WebSocket(url, [token]);

            ////websock 连接
            ws.onopen = function (res) {
                insertFn('······ 连接成功 ······', 'iscon')
                
            }
            //服务器发回的消息
            ws.onmessage = function (res) {
                console.log(res);
            }

            //websock 建立连接后连接出现错误
            ws.onerror = function (res) {
                insertFn('······ 连接出现错误 ······', 'iserror')
                console.log(res);
            }
            //websock 关闭
            ws.onclose = function (res) {
                console.log(res);
            }

  this.isCon = false
     
      // var url = window._CONFIG['domianURL'].replace("https://", "wss://").replace("http://", "ws://") + "/myWebsocket/" + userId;
     
      //console.log(url);
      //update-begin-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
     
      //update-end-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
      this.websock.onopen = this.websocketOnopen;
      this.websock.onerror = this.websocketOnerror;
      this.websock.onmessage = this.websocketOnmessage;
      this.websock.onclose = this.websocketOnclose;

3.心跳机制

websocket在连接时如果长时间不发消息，或者一次性发的消息过多，就有可能断开。这时就需要这个心跳机制来检测有没有断开。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bigbox {
            width: 300px;
            margin: 100px auto;
        }

        .talkbox {
            width: 300px;
            height: 400px;
            padding: 10px;
            border: 1px solid #000;
            box-sizing: border-box;
        }

        .show {
            width: 280px;
            height: 300px;
            border: 1px solid #000;
            box-sizing: border-box;
        }


        .iscon {
            font-size: 12px;
            text-align: center;
        }

        .iserror {
            text-align: center;
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <button id="btn1">连接</button>
        <button id="btn3">断开</button>
        <div class="talkbox">
            <div class="show">

            </div>
            <input type="text" id="inputbox">
            <button id="btn2">发送</button>
        </div>
    </div>

    <script>
        /*
        *
        websock事件：
        open        //连接
        message     //服务器发数据，客户端收到时触发
        error       //连接错误时
        close       //连接关闭时
        */

        let btn = document.getElementById('btn1')
        let btn2 = document.getElementById('btn2')
        let btn3 = document.getElementById('btn3')
        let inputbox = document.getElementById('inputbox')
        let showBox = document.querySelector('.show')
        let inputText = ''//要发送的数据
        let isCon = false
        let ws

        let timeoutHeartBeat = null   //连接之后，每过一段时间就测试一次 ws.readyState，如果不为 1 这边是链接出了问题，则要重新连接

        let timeoutnum = null  //重新连接时，如果连接失败则每过一段时间就重连一次，直至连接成功

        let contime = 15 * 1000 //15
        btn.onclick = () => {
            console.log('发送连接请求');
            initConnect()
        }
        btn2.onclick = () => {
            let inputText = inputbox.value
            //websock 建立连接后发送内容
            if (ws.readyState == 1) {
                clientSend()
            }
            // console.log('websock的状态', ws.readyState);
        }


        btn3.onclick = () => {
            //websock 断开连接
            isCon = true
            ws.close()
            console.log('websock的状态', ws.readyState);
            insertFn('······ 断开成功 ······', 'iscon')
        }

        //屏幕中插入内容
        function insertFn(e, style) {
            let newDiv = document.createElement('div')
            newDiv.innerHTML = e
            newDiv.setAttribute('class', style)
            showBox.appendChild(newDiv)
        }

        //初始化连接
        function initConnect() {
            //监听建立连接
            isCon = false
            ws = new WebSocket('ws://localhost:88');
            console.log('websock的状态', ws.readyState);
            ws.onopen = function (res) {
                insertFn('······ 连接成功 ······', 'iscon')
                console.log(res);
                heartbeat()
            }
            //服务器发回的消息
            ws.onmessage = function (res) {
                //返回消息证明 连接正常 此时重置心跳
                resetHeartBeat()
            }

            //websock 建立连接后连接出现错误
            ws.onerror = function (res) {
                insertFn('······ 连接出现错误 ······', 'iserror')
                console.log(res);
                reconnect()
            }
            //websock 关闭
            ws.onclose = function (res) {
                console.log(res);
                if (isCon) return
                reconnect()
            }

        }

        //心跳
        function heartbeat() {
            timeoutHeartBeat = setTimeout(() => {
                if (ws.readyState == 1) {
                    console.log('连接正常···');
                    ws.send('连接正常')
                } else {
                    console.log('连接已断开，正在重新连接···');
                    reconnect()
                }
                //超时断开连接


            }, 1500)
        }



        //重新连接
        function reconnect() {
            if (isCon) return
            isCon = true
            timeoutnum && clearTimeout(timeoutnum)
            timeoutnum = setTimeout(function () {
                //新连接
                initConnect();
                isCon = false;
            }, 1000);
        }

        //前端发送数据
        function clientSend() {
            ws.send(inputText)
        }

        //前端发送数据 时重置心跳
        function resetHeartBeat() {
            timeoutHeartBeat && clearTimeout(timeoutHeartBeat)
            heartbeat()
        }
    </script>
</body>

</html>