spring boot 使用WebSocket与前端进行byte字节数组交互
一、装逼前先热热身
无论是比较传统的 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的使用并不在本文中进行详细的讲解， 只是将这样一种思路进行简单的实现；
spring boot 使用WebSocket与前端进行byte字节数组交互的更多相关文章
- 【websocket】spring boot 集成 websocket 的四种方式
集成 websocket 的四种方案 1. 原生注解 pom.xml <dependency> <groupId>org.springframework.boot</gr ...
- Spring Boot之WebSocket
一.项目说明 1.项目地址:https://github.com/hqzmss/test01-springboot-websocket.git 2.IDE:IntelliJ IDEA 2018.1.1 ...
- spring boot 集成 websocket 实现消息主动推送
spring boot 集成 websocket 实现消息主动 前言 http协议是无状态协议,每次请求都不知道前面发生了什么,而且只可以由浏览器端请求服务器端,而不能由服务器去主动通知浏览器端,是单 ...
- Spring Boot 集成 WebSocket 实现服务端推送消息到客户端
假设有这样一个场景:服务端的资源经常在更新,客户端需要尽量及时地了解到这些更新发生后展示给用户,如果是 HTTP 1.1,通常会开启 ajax 请求询问服务端是否有更新,通过定时器反复轮询服务端响应的 ...
- 曹工说Spring Boot源码（26）-- 学习字节码也太难了，实在不能忍受了，写了个小小的字节码执行引擎
曹工说Spring Boot源码(26)-- 学习字节码也太难了,实在不能忍受了,写了个小小的字节码执行引擎 写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean De ...
- （八）二进制文件在webservice中的处理（以byte[]字节数组方式）
一.介绍 二进制文件在webservice中的处理. A:通过byte[]字节数组的方式来传递.比较适合小文件,字节数组不能太大的情况.(本章所用) B:通过DataHander的方式来进行传递. 1 ...
- spring boot整合websocket
转载自:https://www.cnblogs.com/GoodHelper/p/7078381.html 一.WebSocket简单介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日 ...
- Spring Boot 系列 - WebSocket 简单使用
在实现消息推送的项目中往往需要WebSocket,以下简单讲解在Spring boot 中使用 WebSocket. 1.pom.xml 中引入 spring-boot-starter-websock ...
- spring boot整合websocket之使用自带tomcat启动项目报错记录
项目中用到websocket,就将原来写好的websocket工具类直接拿来使用,发现前端建立连接的时候报404,经查找发现是因为原来用的是配置的外部tomcat启动,这次是spring boot自带 ...
随机推荐
- type为number的input标签输入小数的方法
纠结了一段时间都没找出方法,最后灵光一现想出这个方法,没想到测试下果然成功了! 看目前网上几乎很难找到相对应的解决方法,所以这里分享出来,如果有更佳方法欢迎提出. 方法如下: <input ty ...
- codeforces 631C C. Report
C. Report time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...
- 基于Ubuntu交叉编译FFmpeg Windows SDK
写在前面 FFmpeg是一个开源且跨平台的音视频解决方案,集采集.转码.流式化为一身,项目的libavcodec编解码模块和libavformat媒体格式模块,支持非常非常丰富的编解码格式和容器封装格 ...
- EasyDarwin+ffmpeg进行PC(摄像头+麦克风)流媒体直播服务
上一回我们描述了用EasyDarwin+ffmpeg进行摄像机直播的过程:ffmpeg推送,EasyDarwin转发,vlc播放 实现整个RTSP直播 我们再进行一个方面的描述,那就是pc摄像头+麦克 ...
- AngularJS方法 —— angular.copy
描述: 复制一个对象或者一个数组(好吧,万物皆对象,数组也是一个对象). 如果省略了destination,一个新的对象或数组将会被创建出来: 如果提供了destination,则source对象中的 ...
- bzoj 4504: K个串 可持久化线段树+堆
题目: Description 兔子们在玩k个串的游戏.首先,它们拿出了一个长度为n的数字序列,选出其中的一 个连续子串,然后统计其子串中所有数字之和(注意这里重复出现的数字只被统计一次). 兔子们想 ...
- 移动端H5 button 默认事件
button 在移动端下会有自带的默认事件,如果不处理的话,点击按钮的时候会有自动刷新页面的效果,原因就是button的默认事件没有阻止. 所以在点击事件里面要加上 e.preventDefault( ...
- 浅谈双流水线调度问题以及Jhonson算法
引入:何为流水线问题 有\(n\)个任务,对于每个任务有\(m\)道工序,每个任务的\(m\)道工序必须在不同的m台机器上依次完成才算把这个任务完成,在前\(i-1\)道工序完成后才能去完成第\(i\ ...
- bzoj 1927 星际竞速 —— 最小费用最大流
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1927 首先注意到这是个DAG: 考虑每个点从哪里来,可以是瞬移来的,也可以是从某个点走过来的 ...
- 计算MySQL的内存峰值公式 (转)
-- 计算MySQL的内存峰值公式,计算所有的连接满了的情况下: select (@@key_buffer_size + @@query_cache_size + @@tmp_table_size ...