html连接websocket（发送心跳包）字节数据

最新推荐文章于 2024-06-08 15:31:20 发布

Cai。。

最新推荐文章于 2024-06-08 15:31:20 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_43826336/article/details/119566766

版权

前端代码注意发送的消息体格式不同

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<title>简易websocket</title>
<body>
    <div>
        <label>请输入链接相关参数:</label>
        <input id="connectId" type="text" style="width:880px;" value="ws://你的地址">
        <button type="button" id="connect">连接</button><button type="button" id="disconnect">断开</button>
    </div>
 <div style="margin-top: 50px">
        <div>
           <button id="sendHeart" type="button">发送心跳</button>
        </div>
    </div>
    <div id="msgInfo">
    </div>
 
    <div style="margin-top: 50px">
        <div>
            <div><span>接收者id:</span><input type="text" id="toId" >
                 <span>要发送的消息:</span><input type="text" id="msg"></input>
                <button id="send" type="button">发送消息</button>
            </div>
        </div>
    </div>
    
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        var websocket=null;
        var conect = null;
 
        //点击连接
        $("#connect").click(function(){
            //判断当前连接是否为空
            // if (websocket != null){
            //     alert("您已经连接了，请不要重复连接！");
            //     return;
            // }
            //自定义的唯一标识，如果两个人输入的连接标识相同则会覆盖原来这个标识对应的连接，这里只是为了简单演示
            var  connectId=$("#connectId").val();
            
            //开始连接
            // 首先判断是否 支持 WebSocket
            if('WebSocket' in window) {
                //路径ws + ip + port + 自定义路径
                conect = connectId;
                var connectUrl = document.getElementById("connectId").value;
                console.log('链接地址' + connectUrl)
                websocket = new WebSocket(connectUrl);
                
            }  else {
                alert("浏览器不支持连接！")
                return;
            }
 
            // 打开时
            websocket.onopen = function(evnt) {
                console.log("  websocket.onopen  ");
                alert("连接成功!");
            };
 
            // 处理消息时
            websocket.onmessage = function(evnt) {
                //将消息转成json格式
                var msg = JSON.parse(evnt.data);
                $("#msgInfo").append("<p><font color='red'>" + evnt.data + "</font></p>");
                console.log("  websocket.onmessage   ");
            };
 
            websocket.onerror = function(evnt) {
                console.log("  websocket.onerror  ");
            };
 
            websocket.onclose = function(evnt) {
                console.log("  websocket.onclose  ");
                websocket.close();
                alert("连接关闭!");
            };
        });
 
         //点击断开
        $("#disconnect").click(function(){
             alert("连接关闭!");
             websocket.onclose = function(evnt) {
                 console.log("  websocket.onclose  ");
                 websocket.close();
                 alert("连接关闭!");
             };
             websocket.close();
        });

        //发送消息
        $("#send").click(function(){
           //先判断是否连接
           if (websocket == null){
               alert("您还没有连接!!!");
               return;
           }
 
           //接收者id
            var toId = $("#toId").val();
           //发送的消息内容
            var msg = $("#msg").val();
            if (toId == null || toId == ''){
                alert("请先输入接收者");
                return;
            }
            if (msg == null || msg == ''){
                alert("消息不能为空!!!");
                return;
            }
 
            //发送消息
            //构造消息的json格式
            // 注意发送的消息体格式不同
            var msgJson = {
                senderId:conect,
                msgContent: msg,
                toId:toId
            };
            websocket.send(JSON.stringify(msgJson));
        });

         //发送心跳
        $("#sendHeart").click(function(){
           //先判断是否连接
           if (websocket == null){
               alert("您还没有连接!!!");
               return;
           }

// 二进制 https://blog.csdn.net/weixin_34323858/article/details/87961467?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.control
            let buffer = new ArrayBuffer(1); // 初始化1个Byte的二进制数据缓冲区
            let dataView = new DataView(buffer);
            // // 数据写入过程
            dataView.setInt8(0,1); // 从第0个Byte位置开始，放置一个数字为1的数据


            websocket.send(dataView);
            // console.log(" 发送心跳  " + blob);
        });
    </script>
</html>

后端部分代码（接收数据的两种方式）

// 接收消息 客户端发送过来的消息
	@OnMessage
	public void onMessage(String message, Session session) throws IOException {
        logger.info("客户端的发送消息======内容【" + message + "】");
	}

	@OnMessage
	public void onMessage1(byte[] messages, Session session) throws IOException {
		// 判断是否是心跳数据， 这里因为有多种设备。
		// 并且考虑到兼容情况，所以只记录客户端主动发送心跳的
		if (messages.length == 1 && messages[0] == 1){
		}
	}

Cai。。

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html连接websocket（发送心跳包）字节数据

前端代码注意发送的消息体格式不同<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><title>简易websocket</title><body> <d
复制链接

扫一扫