websocket的js原生写法

最新推荐文章于 2025-06-27 09:03:09 发布

Jinwen5290

最新推荐文章于 2025-06-27 09:03:09 发布

阅读量843

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript websocket

本文链接：https://blog.youkuaiyun.com/lzx5290/article/details/127440574

前端专栏收录该内容

11 篇文章

订阅专栏

该博客介绍了在Thymeleaf项目中使用WebSocket与指纹采集器进行通信的方法。通过检查浏览器对WebSocket的支持，建立与服务器（ws://127.0.0.1:4649/WebServer）的连接，并在连接打开时发送指纹录入指令。当接收到消息时，处理并解析返回的二进制数据。如果连接关闭或出现错误，会有相应的处理机制。

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

最近在做门锁的指纹采集时，pc端和指纹采集器通过websocket进行通信，项目前端采用thymeleaf，所以关于websocket的用法做下记录。

     var socketUrl = "ws://127.0.0.1:4649";
		var socket;

		// 判断浏览器对WebSocket是否支持
		function checkSocket(){
			if(typeof(WebSocket) == "undefined") {
				console.log("浏览器不支持WebSocket");
				return false;
			}else{
				console.log("浏览器支持WebSocket");
				return true;
			}
		}

     // 页面中某个按钮的触发方法
		function openSocket() {
			if(checkSocket()) {
				var wsUrl = socketUrl + "/WebServer";

				console.log(wsUrl);
				// 每次先关闭之前的，再重新打开一次
				if(socket!=null){
					socket.close();
					socket=null;
				}
				socket = new WebSocket(wsUrl);
				// 指定websocket 连接所传输二进制数据的类型
				socket.binaryType = 'arraybuffer';

				//打开事件
				socket.onopen = function() {
					console.log("websocket已打开，发送录入指纹指令");
					// 在打开事件中发送采集指纹的指令（因为这个是页面某个按钮触发的，所以在打开监听里面直接发送采集指纹的指令）
					socket.send(new Uint8Array([0x8013]));
				};
				//获得消息事件
				socket.onmessage = function(event) {
					console.log("消息进入...");
					console.log(event.data);
					// 处理接收的信息，根据实际业务处理
					const data_recv = new Packet().fromBytes(new Uint8Array(event.data));
				   const response = Payload.response(data_recv);
				   ......
				};
				//关闭事件
				socket.onclose = function() {
					console.log("websocket已关闭");
				};
				//发生了错误事件
				socket.onerror = function() {
					$.modal.alertError("websocket错误，请刷新页面后重试！");
				}
			} else {
				console.log("浏览器不支持WebSocket");
			}
		}