专业的编程技术博客社区

网站首页 > 博客文章 正文

spring boot 使用WebSocket与前端进行byte字节数组交互

baijin 2024-08-23 10:52:18 博客文章 4 ℃ 0 评论

一、装逼前先热热身

无论是比较传统的 web项目 还是近几年流行的前后端分离，后端只独立提供数据交互接口服务的项目，都避免不了数据之间交互格式的选择。

  • 从很早之前的 xml 格式
  • 到现在最火热的json格式

我们可以发现数据格式都是越来越 “短小精悍” 。当然我们可能在某些特定的业务场合，比如对延时要求特别高的场景

  • H5多人对战类型游戏
  • 实时的数据信息交互场景 语音聊天、以及难度更高的视频聊天等

或者对传输数据大小有一定限制的业务场所；那么这时候我们就可以使用websocket 进行信息数据的交互；不过使用传统的websocket +json字符串的方式来进行数据交互的话，无论是网络带宽的占用以及响应的时间上来说都比不上使用byte字节数组交互数据的方式；当然，对于很早之前的web前端，并不能很好的处理byte字节数组，不过随着H5的到来我们在JavaScript上也可以很好的对二进制数据进行操作

二、具体实现步骤

  • spring boot 依赖加入
  • WebSocket config配置
  • WebSocket接口类简单实现
  • 前端JavaScript具体实现
  • 1、spring boot 依赖加入
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-websocket</artifactId>
 </dependency>
  • 2、 WebSocket config配置
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter; 
@Configuration
public class WebConfig {
 @Bean
 public ServerEndpointExporter serverEndpointExporter() {
 return new ServerEndpointExporter();
 }
}
  • 3. WebSocket接口类简单实现
package com.example.demo;
import org.springframework.stereotype.Component;
import java.nio.ByteBuffer;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
/**
 * @ServerEndpoint
 * 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,
 * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
 */
@ServerEndpoint(value="/websocket")
@Component
public class WebSocketTest {
 @OnOpen
 public void onOpen(Session session){ System.out.println("加入连接"); }
 @OnClose
 public void onClose(){ System.out.println("关闭连接"); }
 @OnError
 public void onError(Session session, Throwable error){ 
 System.out.println("发生错误");
 error.printStackTrace(); 
 }
 /**
 * 收到客户端消息后调用的方法
 * @param messages 客户端发送过来的消息
 * @param session 可选的参数
 */
 @OnMessage
 public void onMessage(byte[] messages, Session session) {
 try {
 System.out.println("接收到消息:"+new String(messages,"utf-8"));
 //返回信息
 String resultStr="{name:\"张三\",age:18,addr:\"上海浦东\"}";
 //发送字符串信息的 byte数组
 ByteBuffer bf=ByteBuffer.wrap(resultStr.getBytes("utf-8"));
 session.getBasicRemote().sendBinary(bf);
 //发送字符串
 //session.getBasicRemote().sendText("测试");
 } catch (Exception e) {
 // TODO Auto-generated catch block
 e.printStackTrace();
 }
 }
}
  • 4. 前端JavaScript具体实现
<html>
<head> 
</head>
<body>
 <input id="text" type="text"/>
 <button onclick="send()">发送消息</button> 
 <div id="message"></div>
</body>
<script type="text/javascript">
 var websocket = null;
 //判断当前浏览器是否支持WebSocket
 if ('WebSocket' in window) {
 websocket = new WebSocket("ws://localhost:8080/websocket");
 //websocket默认是传输字符串的，需要改为arraybuffer二进制传输类型
 websocket.binaryType = "arraybuffer";
 }else {
 alert('当前浏览器 Not support websocket')
 }
 //连接发生错误的回调方法
 websocket.onerror = function () {
 setMessageInnerHTML("WebSocket连接发生错误");
 };
 //连接成功建立的回调方法
 websocket.onopen = function () {
 setMessageInnerHTML("WebSocket连接成功");
 }
 //接收到消息的回调方法
 websocket.onmessage = function (event) { 
 //将接收到的二进制数据转为字符串
 var unit8Arr = new Uint8Array(event.data) ; 
 setMessageInnerHTML(byteToString(unit8Arr)); 
 }
 //连接关闭的回调方法
 websocket.onclose = function () {
 setMessageInnerHTML("WebSocket连接关闭");
 }
 //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
 window.onbeforeunload = function () {
 closeWebSocket();
 }
 
 function setMessageInnerHTML(innerHTML) {
 document.getElementById('message').innerHTML += innerHTML + '<br/>';
 }
 //关闭WebSocket连接
 function closeWebSocket() {
 websocket.close();
 }
 //发送消息
 function send() {
 var message = document.getElementById('text').value; 
 
 //将字符串转换为byte数组
 var bytesArr= stringToByte(message); 
 var bytes =new Uint8Array(bytesArr.length) ;
 for (var i = 0; i < bytes.length; i++) {
 bytes[i]=bytesArr[i];
 } 
 console.log(bytes)
 websocket.send(bytes);
 }
 
 
 //将字符串转为 Array byte数组
 function stringToByte(str) { 
 var bytes = new Array(); 
 var len, c; 
 len = str.length; 
 for(var i = 0; i < len; i++) { 
 c = str.charCodeAt(i); 
 if(c >= 0x010000 && c <= 0x10FFFF) { 
 bytes.push(((c >> 18) & 0x07) | 0xF0); 
 bytes.push(((c >> 12) & 0x3F) | 0x80); 
 bytes.push(((c >> 6) & 0x3F) | 0x80); 
 bytes.push((c & 0x3F) | 0x80); 
 } else if(c >= 0x000800 && c <= 0x00FFFF) { 
 bytes.push(((c >> 12) & 0x0F) | 0xE0); 
 bytes.push(((c >> 6) & 0x3F) | 0x80); 
 bytes.push((c & 0x3F) | 0x80); 
 } else if(c >= 0x000080 && c <= 0x0007FF) { 
 bytes.push(((c >> 6) & 0x1F) | 0xC0); 
 bytes.push((c & 0x3F) | 0x80); 
 } else { 
 bytes.push(c & 0xFF); 
 } 
 } 
 return bytes; 
 
 
 }
 
 //byte数组转字符串
 function byteToString(arr) {
 if(typeof arr === 'string') {
 return arr;
 }
 var str = '',
 _arr = arr;
 for(var i = 0; i < _arr.length; i++) {
 var one = _arr[i].toString(2),
 v = one.match(/^1+?(?=0)/);
 if(v && one.length == 8) {
 var bytesLength = v[0].length;
 var store = _arr[i].toString(2).slice(7 - bytesLength);
 for(var st = 1; st < bytesLength; st++) {
 store += _arr[st + i].toString(2).slice(2);
 }
 str += String.fromCharCode(parseInt(store, 2));
 i += bytesLength - 1;
 } else {
 str += String.fromCharCode(_arr[i]);
 }
 }
 return str;
 }
 
</script>
</html>

三、效果展示

  • 连接状态

不过目前这只是一个特别简单的demo，对于websocket的使用并不在本文中进行详细的讲解， 只是将这样一种思路进行简单的实现；

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表