springboot（二）websocket实现前后端使用Base64发送图片

最新推荐文章于 2024-06-25 10:53:40 发布

superboy@.

最新推荐文章于 2024-06-25 10:53:40 发布

阅读量3k

点赞数 1

分类专栏： # socket 文章标签： java

本文链接：https://blog.csdn.net/weixin_46504244/article/details/119678826

版权

socket 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文介绍了如何在SpringBoot项目中集成WebSocket，包括在pom.xml添加依赖，配置WebSocket支持，创建WebSocket处理类以及前端HTML页面进行测试。通过设置缓冲区大小，允许发送大容量内容，实现了服务器向所有在线客户端广播消息的功能。

摘要由CSDN通过智能技术生成

第一步: 先创建一个springboot项目

第二步:在pom中引入websocket依赖

pom引入websocket依赖请看上一篇文章：

springboot（一）WebSocket实现前后端消息推送

第三步: 新建配置类，开启WebSocket支持：

因为我们图片采用base64发送，因此内容肯定会很长，有的小的图片可以发（比如1-2k这种），但大的就不行。于是加入配置在WebSocketConfig.class实现ServletContextInitializer接口并设置发送内容大小限制。

package com.example.demo.config;

import org.springframework.boot.web.servlet.ServletContextInitializer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
import org.springframework.web.util.WebAppRootListener;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;

/**
 * 开启WebSocket支持
 **/

@Configuration
public class WebSocketConfig implements ServletContextInitializer {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
    //设置websocket发送内容长度
    @Override
    public void onStartup(ServletContext servletContext) throws ServletException {
        servletContext.addListener(WebAppRootListener.class);
        //这里设置了1024M的缓冲区
        //Tomcat每次请求过来时在创建session时都会把这个webSocketContainer作为参数传进去所以对所有的session都生效了
        servletContext.setInitParameter("org.apache.tomcat.websocket.textBufferSize","1024000");
       );
    }
}

第四步：新建一个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());
 
    }
 
}

第五步：前端测试，新建一个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>

superboy@.

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
springboot（二）websocket实现前后端使用Base64发送图片

第一步: 先创建一个springboot项目第二步:在pom中引入websocket依赖pom引入websocket依赖请看上一篇文章：springboot（一）WebSocket实现前后端消息推送第三步: 新建配置类，开启WebSocket支持：因为我们图片采用base64发送，因此内容肯定会很长，有的小的图片可以发（比如1-2k这种），但大的就不行。于是加入配置在WebSocketConfig.class实现ServletContextInitializer接口并设置发送内...
复制链接

扫一扫