springboot使⽤WebSocket与前端进⾏byte字节数组交互
⼀、前先热热⾝
⽆论是⽐较传统的 web项⽬ 还是近⼏年流⾏的前后端分离，后端只独⽴提供数据交互接⼝服务的项⽬，都避免不了数据之间交互格式的选择。
从很早之前的 xml 格式
到现在最⽕热的json格式
我们可以发现数据格式都是越来越 “短⼩精悍” 。当然我们可能在某些特定的业务场合，⽐如对延时要求特别⾼的场景
H5多⼈对战类型游戏
实时的数据信息交互场景 语⾳聊天、以及难度更⾼的视频聊天等
或者对传输数据⼤⼩有⼀定限制的业务场所；那么这时候我们就可以使⽤websocket 进⾏信息数据的交互；不过使⽤传统的websocket +json字符串的⽅式来进⾏数据交互的话，⽆论是⽹络带宽的占⽤以及响
应的时间上来说都⽐不上使⽤byte字节数组交互数据的⽅式；当然，对于很早之前的web前端，并不能很好的处理byte字节数组，不过随着H5的到来我们在JavaScript上也可以很好的对⼆进制数据进⾏操作
⼆、具体实现步骤
1. spring boot 依赖加⼊
2. WebSocket config配置
3. WebSocket接⼝类简单实现
4. 前端JavaScript具体实现
1、spring boot 依赖加⼊
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
2、 WebSocket config配置
import t.annotation.Bean;
import t.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
3. WebSocket接⼝类简单实现
ample.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.Bytes("utf-8"));
//发送字符串
//BasicRemote().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 =new WebSocket("ws://localhost:8080/websocket");
//websocket默认是传输字符串的，需要改为arraybuffer⼆进制传输类型
websocket.binaryType ="arraybuffer";
}else{
alert('当前浏览器 Not support websocket')
}
//连接发⽣错误的回调⽅法
setMessageInnerHTML("WebSocket连接发⽣错误");
};
//连接成功建⽴的回调⽅法
setMessageInnerHTML("WebSocket连接成功");
}
//接收到消息的回调⽅法
//将接收到的⼆进制数据转为字符串
var unit8Arr =new Uint8Array(event.data);
setMessageInnerHTML(byteToString(unit8Arr));
}
//连接关闭的回调⽅法
setMessageInnerHTML("WebSocket连接关闭");
}
//监听窗⼝关闭事件，当窗⼝关闭时，主动去关闭websocket连接，防⽌连接还没断开就关闭窗⼝，server端会抛异常。    beforeunload=function(){
closeWebSocket();
}
function setMessageInnerHTML(innerHTML){
}
//关闭WebSocket连接
function closeWebSocket(){
websocket.close();
}
//发送消息
function send(){
var message = ElementById('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{
typeof arraybytes.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的使⽤并不在本⽂中进⾏详细的讲解， 只是将这样⼀种思路进⾏简单的实现；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。