随意开发一个websocket通信DEMO

随意开发一个websocket通信DEMO

示例： 5445c1737db94417bcc844aaa9865e11.png
连接一个免费的ws测试服务来演示此项功能，HeartBeat为心跳连接

ws://123.207.136.134:9010/ajaxchattest
希望各位小伙伴多多点赞收藏转发
源码给上：
HTML

      <div>
            <h1>WebSocket 通信</h1>
            <div>
                <div>
                    <textarea rows="6" id="sendMsg" style="width: 100%;"></textarea>
                </div>
                <div>
                    <div>
                        <button type="button" onkeydown="sendMsg()" onclick="sendMsg()">发送</button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div></div>
                    <div>
                        <div id="chartRoom">
                            <p>本机发送消息：<span id="receivedMsg"></span></p>
                            <p>服务器返回消息：<span id="getMsg"></span></p>
                            <a href="javascript:;" onclick="refreshConnect()" role="button">刷新连接</a>
                            <hr>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <script src="./static/js/websocket.js"></script>

JS

var os = require("os");
var websoketArray = [];
if (typeof module === 'object') {
    window.jQuery = window.$ = module.exports;
};
$(function() {
    startConnect();});function startConnect() {
    websoketArray.push(new createWebsocket("ws://123.207.136.134:9010/ajaxchattest"));
}
function createWebsocket(url) {
    var heartCheck = {
        timeout: 3000,
        timeoutObj: null,
        reset: function() {
            clearTimeout(this.timeoutObj);
            this.start();
        },      start: function() {
            this.timeoutObj = setTimeout(function() {
                ws.send("HeartBeat");
            }, this.timeout)
        }   }   var ws = new WebSocket(url);
    ws.onopen = (event) => {
        console.log("已成功连接ws服务");
        $("#chartRoom").append("<p>与 " + url + " 建立连接--成功</p>");
        heartCheck.start(); }   ws.onmessage = (event) => {
        console.log(event);
        console.log(event.data);
        if (!event.data.includes("HeartBeat")) {
            $("#getMsg").html(event.data);
        } else {
            heartCheck.reset();     }   }   ws.onclose = function(event) {
        console.log(url + "连接已关闭...");
        clearTimeout(heartCheck.timeoutObj);    }   ws.onerror = function(event) {
        $("#chartRoom").append("<p>与 " + url + " 建立连接--失败</p>");
        ws.close();     websoketArray.splice(websoketArray.indexOf(ws), 1);
        console.log(url + "连接已关闭");
        setTimeout(function() {
            startConnect();     }, 3000);
    }   return ws;
}
function sendMsg() {
    var msg = $("#sendMsg").val();
    if (!msg) {
        return;
    }   $("#receivedMsg").html(msg);
    if (msg !== "" && msg !== undefined) {
        for (var i = 0; i < websoketArray.length; i++) {
            websoketArray[i].send(msg);         $("#sendMsg").val(null);
        }   }}function refreshConnect() {
    for (var i = 0; i < websoketArray.length; i++) {
        websoketArray[i].close();   }   setTimeout(function() {
        startConnect(); }, 3000);
}