springboot 2.4.6整合websocket

gitee地址：https://gitee.com/wyait/spring-boot-websocket.git

github地址：https://github.com/wyait/springboot-websocket.git


本文需要一定的java、springboot技术基础。

这里只是阐述说明，实际效果需要结合源码进行理解。

整合websocket实现推送数据（消息、图片）流

什么是webSocket？

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，

然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

websocket特点：

  • 1.建立在 TCP 协议之上，服务器端的实现比较容易。
  • 2.与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
  • 3.数据格式比较轻量，性能开销小，通信高效。
  • 4.可以发送文本，也可以发送二进制数据。
  • 5.没有同源限制，客户端可以与任意服务器通信。
  • 6.协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

相关api，todo

场景

前后端分离项目，业务员在后台PC操作的图片切换，前端客户端页面可以动态展示。考虑通过websocket建立通讯通道，实现服务器端主动推送文件流给前端，实现动态图片文件展示。

websocket适用场景：

  • 聊天
  • 多用户（协同）编辑
  • 服务端推送数据流到客户端
  • 音视频聊天 / 视频会议 / 在线教育：用WebSockets getUserMedia API和HTML5音视频元素是个不错的选择。WebRTC的出现顺理成章的成为刚才概括的组合体，它看起来很有希望，但其缺乏目前浏览器的支持。

相关技术

  • springboot 2.4.6
  • websocket
  • jdk1.8
  • fastjson 1.2.79 （注意：有版本兼容性问题）

demo测试访问地址

  • 本地聊天室访问地址： http://127.0.0.1:8033/websocketDemo.html
  • 通过websocket主动推流图片到前端，动态切换图片接口地址：http://127.0.0.1:8033/ppt/change/1/5
  • pdf解析为图片访问地址：http://127.0.0.1:8033/pdf.html

动态切换图片，主动推送数据流接口示例

http://127.0.0.1:8033/ppt/change/{sid}/{fileName}

sid：不同用户（demo只是区分了1和其他），对应查看的图片内容不一样

fileName：分享图片的名称（注意，本地是加载指定路径下的图片文件，跑demo的时候，要提前准备好）

创建springboot项目并集成websocket


项目相关代码，详见源码，这里就不赘述。

WebSocketServer

我们需要实现它的三个方法：OnOpen，OnClose，OnMessage

他们都会自动调用，类似于事件触发，含义分别是，连接建立成功时调用的方法，连接关闭时调用的方法，最后一个是接收客户端发来的消息

其中OnMessage我们后面会使用多种实现，支持数据、二进制数据流。


使用websocket实现文件上传功能

我们仿造刚才的

WebSocketServer

在写一个websocket类

还是在web包下建立一个类，类名为

WebSocketUploadServer

可以将原来WebSocketServer的代码复制过来，然后稍微改造一下，其实我们实现文件上传也可以直接在原来WebSocketServer的代码里直接实现。

原本聊天室的情况下，一个房间里是可以有多个客户端连接的，但是文件上传我们是不允许的，假如有多个人在同一个房间，那么消息就会传到每个客户端，因为我们要做分块上传，所以这里控制每个房间只能有一个人。

我们把websocketDemo.html也复制一份，改名就叫

uploadFileDemo.html

我们原先的房间号是手动输入的，现在，我们保证每次都是不同的房间号所以，这次房间号就用随机数。

当然方法有很多种，我只是提供一种简单的实现方式，不同的业务场景当然也需要不同的实现方式。

后台的核心代码主要是接收字节流和json消息，我们将字符串消息格式化成了json消息。

1，接收字符串：public void onMessage(String message, Session session) {}

2，接收字节流：public void onMessage(byte[] message, Session session) {}

业务逻辑我们放在了service层进行处理

在websocketupload包下建立service包

然后建立SaveFileI接口，接口里有两个方法，一个是创建文件路径的，一个是将流数据写入文件。

我们在websocket服务里注入接口的时候要注意一点，因为spring是单例的，websocket在初始化的时候就实例化了spring的bean，但是当websocket创建一个新的连接的时候spring的bean会出现null的问题（static静态注入问题），也就是它只注入了一次。解决方案详见代码，或组合使用@PostConstruct注解解决。

最后返回的这个文件地址，项目中指定本地目录下。

websocket推送图片流到前端

1，聊天页面websocketDemo.html新增图片img标签，用于展示推送的图片显示。

2，service层新增websocket推送二进制数据流到前端，WebsocketServer.sendPic()。

3，后台新增动态切换图片接口PptImgController（service层调用websocket推送二进制数据流到前端方法）。

4，本地指定文件路径WebsocketServer.sendPic().filePath下，放置测试图片文件（命名要和接口3中的一致）。

详见代码。

新增上传PPT文件，每页生成单独的图片

//todo 图片超出制定大小，进行压缩处理。

方案一 使用pdfbox插件【推荐】

上传pdf文件，转为图片保存，并生成图片地址。

1，引入依赖：

org.apache.pdfbox pdfbox 2.0.23 cn.hutool hutool-all 5.3.8

2，接口入口PdfToImgController 请求示例：/pdf/to/image

3，pdf转图片工具类PdfToImageUtils

4，页面请求地址：http://127.0.0.1:8033/pdf.html

保存图片位置，PdfToImageUtils.IMG_PATH，demo路径为：D:\data\images\pdf\ （可自定义）

无中文乱码问题。

方案二 使用icepdf插件【不推荐】

详见源码：ImageUtils类，

遗留问题：在解析pdf时，应用服务所在的系统环境中，如果存在不支持的字体，就会出现中文乱码，需要额外在系统环境中安装字体。

其他方案

itextpdf插件

等比压缩图片功能

详见：PdfToImageUtils.compressPic()方法