websocket虽说兼容性差，但是随着移动互联网的发展，websocket的使用也越来越多。今天就来说一下，springboot如何集成websocket，其实很简单，这些spring都给我们做好了，只需简单配置一下就可以用来，废话不多说，直接撸码。
第一步: 先创建一个springboot项目
第二步:在pom中引入websocket依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
第三步: 配置springboot支持websocket,这里我就直接将配置放在启动类中了，当然也可以自己创建一个config注入。
@SpringBootApplication
public class RedisClusterDemoApplication implements ServletContextInitializer {
public static void main(String[] args) {
SpringApplication.run(RedisClusterDemoApplication.class, args);
}
//添加websocket支持
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
第四步：新建一个websocket处理类,这里我创建一个类为WebSocketServer
@Slf4j
//这里特别注意必须加‘/’否则注入会报错我被坑了😂，
@ServerEndpoint("/websocket")
@Component
public class WebSocketServer {
@OnOpen
public void onOpen(Session session){
log.error("----onOpen-----");
}
@OnClose
public void onClose(){
log.error("----onClose-----");
}
@OnMessage
public void onMessage(String message,Session session){
log.error("----onMessage-----"+ message);
//这里的逻辑是客户端发送来消息服务器转发给所有在线客户端
try {
for (Session c:session.getOpenSessions()
) {
c.getBasicRemote().sendText(message);
}
} catch (IOException e) {
e.printStackTrace();
}
}
@OnError
public void onError(Session session, Throwable error){
log.error("----onError-----"+error.getMessage());
}
}
到这步，简单websocket服务器就搭建好了，接下来用前端测试一下：
第五步：前端测试，新建一个html文件如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>websocket测试</title>
</head>
<body>
<input type="text" id="text"><button onclick="sendText()">发送</button>
<input type="file" id="f" onchange="chooseFile()">
<div id="main">
</div>
<script type="text/javascript">
var ws = new WebSocket("ws://localhost:9011/websocket")
ws.onopen = function (ev) {
console.log("------连接服务器成功-----")
}
ws.onerror=function (ev) {
console.log("------连接服务器出错-----")
}
//接收消息
ws.onmessage=function (ev) {
//解析json
var json = JSON.parse(ev.data);
//1为文本消息
if(json.code==1){
document.querySelector("#main").innerHTML="<p>"+json.msg+"</p>"+document.querySelector("#main").innerHTML;
//2为图片消息
}else if(json.code==2){
document.querySelector("#main").innerHTML='<img width="150px" src='+json.msg+'>'+document.querySelector("#main").innerHTML;
}
}
//发送文本消息
function sendText() {
var msg = document.querySelector("#text").value
if(msg){
ws.send(JSON.stringify({code:1,msg:msg}));
document.querySelector("#text").value=""
}
}
//发送图片消息
function chooseFile() {
var files = document.querySelector("#f").files
if(files.length>0){
var fileReader = new FileReader();
fileReader.readAsDataURL(files[0])
fileReader.onload=function (e) {
var s = JSON.stringify({code:2,msg:e.target.result});
ws.send(s)
}
}
}
</script>
</body>
</html>
因为代码简单，所以把源码全部贴了。
别以为到这里就完了，文本消息随便发送都没有问题，但是图片发送就出问题了，关键是不报错，我到网上看到有人问websocket发送内容太长了报错。我猜想应该就是这个问题。因为我们图片采用base64发送，因此内容肯定会很长，有的小的图片可以发（比如1-2k这种），但大的就不行。于是就顺着websocket发送内容太长了如何解决的问题，我在网上找到一个解决办法：
https://blog.csdn.net/luohualiushui1/article/details/86596754 非常感谢博主的贡献。
即加入配置 在原来的启动类中实现ServletContextInitializer接口并设置发送内容大小限制。
@SpringBootApplication
public class RedisClusterDemoApplication implements ServletContextInitializer {
public static void main(String[] args) {
SpringApplication.run(RedisClusterDemoApplication.class, args);
}
//添加websocket支持
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
//设置websocket发送内容长度
@Override
public void onStartup(ServletContext servletContext) throws ServletException {
servletContext.setInitParameter("org.apache.tomcat.websocket.textBufferSize","1024000");
}
}
至此，就可以实现websocket的发送图片，大小图都可以了(当然看配置，如果需要发MB级别自己修改参数即可)。
效果展示
image.png
总结:
到这里，文章就写完了，这篇文章也没多少干货，只是在学习的时候做个有记录，万一以后有类似需求可以用上。因为内容简单，我就不放github地址了，如果有需要可以联系我，如果喜欢我的文章记得关注我😊哦！
网友评论