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

最新推荐文章于 2024-06-07 23:34:50 发布

无名氏灬

最新推荐文章于 2024-06-07 23:34:50 发布

阅读量10w+

点赞数 4

本文链接：https://blog.csdn.net/m0_37992075/article/details/83587624

版权

spring boot 专栏收录该内容

1 篇文章 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的使用并不在本文中进行详细的讲解，只是将这样一种思路进行简单的实现；

无名氏灬

关注

4
点赞
踩
27

收藏

觉得还不错? 一键收藏
5
评论
spring boot 使用WebSocket与前端进行byte字节数组交互

一、装逼前先热热身无论是比较传统的 web项目还是近几年流行的前后端分离，后端只独立提供数据交互接口服务的项目，都避免不了数据之间交互格式的选择。从很早之前的 xml 格式到现在最火热的json格式我们可以发现数据格式都是越来越 “短小精悍” 。当然我们可能在某些特定的业务场合，比如对延时要求特别高的场景H5多人对战类型游戏实时的数据信息交互场景语音聊天、以及难度更高的...
复制链接

扫一扫