//浏览器WebSocket对象
var wsImpl = window.WebSocket || window.MozWebSocket;
function SocketStart(options, cl) {
    this.url = options.url;//Socket地址
    this.ws = new wsImpl(options.url);//初始化Socket对象
    this.userid = options.userid;//用户id
    this.onmessage = options.onmessage;//接受消息回调函数
    this.onopen = options.onopen;//连接成功回调函数
    this.onclose = options.onclose;//连接断开回调函数
    this.dataType = options.dataType || 'json';//json或txt格式数据 默认json
    var _self = this;
    SocketInit(_self)
}

function SocketInit(_self) {
    //setTimeout
    var loopTime;
    /**
     * 发送消息方法
     * msg 消息内容，字符串或json都可以
     * touser 接受方id
     */
    _self.send = function (msg,touser) {
        // 组装消息
        var msg = {
            userid: _self.userid,
            touser:touser,
            msg: msg
        }
        //转字符串
        var msgstr=JSON.stringify(msg);
        //获取消息字符串字节长度
        var msglength=msgstr.StrLength();
        //判断是否超过限制
        if(msglength>4000){
            console.error("消息内容过长！");
            return;
        }

        // 发送消息
        try {
            _self.ws.send(msgstr);
        } catch (error) {
            console.log(error)
        }

    }

    /**
     * 接收消息事件
     */
    _self.ws.onmessage = function (evt) {
        // 判断消息是否为空
        if (!evt.data) {
            return;
        }

        //判断消息类型
        var get_data;
        if (_self.dataType == 'json') {
            get_data = JSON.parse(evt.data)
        } else {
            get_data = evt.data
        }

        //判断消息是否为心跳
        if (get_data.msg == '__loop__') {
            return;
        }
        // 连接成功
        if (get_data.msg == "__success__") {
            console.log("连接成功！");
            return;
        }

        //调用回调函数
        if (_self.onmessage) {
            _self.onmessage(get_data.msg,get_data.userid,get_data);
        }

    };
    //连接成功事件
    _self.ws.onopen = function () {
        // 调用心跳函数 第一次发送内容为  __success__
        loop("__success__");

        //调用回调函数
        if (_self.onopen) {
            _self.onopen();
        }
    };

    //断开连接事件
    _self.ws.onclose = function () {
        clearTimeout(loopTime);
        console.error("连接断开！");
        console.log("重新连接！");

        
        //调用回调函数
        if (_self.onclose) {
            _self.onclose();
        }

        //1秒后重连
        setTimeout(function () {
            _self.ws = new wsImpl(_self.url);
            SocketInit(_self)
        }, 1000);
    }

    //心跳函数 递归执行 10秒一次，接收方为自己
    function loop(i) {
        _self.send((i || "__loop__"),_self.userid);
        loopTime = setTimeout(function () {
            loop();
        }, 10000);
    }
}

/**
 * 获取字符串字节长度
 */
function StrLength(){
    var num=0;
    for (var i = 0; i < this.length; i++) {
        var charCode=this[i].charCodeAt(0);
        if (charCode < 0x007f)  {  
            num++;
        }
        else if ((0x0080 <= charCode) && (charCode <= 0x07ff))  {  
            num+=2;
        }
        else if ((0x0800 <= charCode) && (charCode <= 0xffff))  {  
            num+=3;
        }else{
            num+=4;
        }
    }
    return num;
}
/**
 * 获取字符串字节长度
 */
String.prototype.StrLength=StrLength;

使用

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <span id="userid">

    </span>
    <br>
    <input type="text" name="" id="touser" placeholder="接收方id">
    <br>
    <button id="send">发送消息</button>
    <br>
    <textarea id="msg" name="" id="" cols="60" rows="20"  placeholder="消息内容"></textarea>
    <br>
    <textarea id="getmsg" name="" id="" cols="60" rows="20" placeholder="接收消息"></textarea>
    <pre id="incomming"></pre>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="SocketStart.js"></script>
    <script type="text/javascript">
        $(function () {
            var userid = "aa" + Math.ceil(Math.random() * 100000);
            $("#userid").text(userid)
            var ss = new SocketStart({
                url: "ws://localhost/Socket",
                userid: userid,
                onopen: function () {
                    console.log(666);
                },
                onclose: function () {
                    console.error(666);
                },
                onmessage: function (msg, userid,get_data) {
                    console.log(msg)//收到的消息内容
                    console.log(userid)//发送者的id
                    console.log(get_data)//接收到的完整数据
                    $("#getmsg").val(msg)
                },
            });

            //发送消息
            $("#send").click(function (e) {
                ss.send($("#msg").val(), $("#touser").val())
            });

        })

    </script>
</body>

</html>

后端代码 C#

# websocket # javascript
Logo
MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

cover

“钞能力”奏效？Meta一口气挖走OpenAI三员大将

avatar MCP技术社区

平板选大屏：2025年最大平板屏幕TOP5推荐！

若追求屏幕尺寸与AI功能的前沿融合,荣耀MagicPad 3的165Hz护眼大屏、12450mAh青海湖电池及免费AI PPT等创新,使其成为当前“大屏AI化”的引领者。2025年的平板市场迎来一波“大屏革命”,13英寸以上的超大屏搭配旗舰性能与AI赋能,彻底模糊了平板与笔记本的界限。作为首款“AI全场景赋能”的平板,MagicPad 3从护眼、续航到交互,重新定义了大屏平板的体验上限。整合AI离

avatar MCP技术社区

2025年计算机行业选择分析报告

工业和信息化部、中央网信办等四部门联合印发《国家人工智能产业综合标准化体系建设指南（2024版）》，提出到2026年，我国人工智能产业标准与产业科技创新的联动水平持续提升，新制定国家标准和行业标准50项以上，引领人工智能产业高质量发展的标准体系加快形成。传统的初级编码岗位和一些过时技术栈面临被淘汰的风险。从板块表现来看，截至2025年2月7日收盘，计算机指数较年初上涨11.01%，同期沪深300指

avatar MCP技术社区