【Websocket】实现聊天室上传照片

关注

原创最新推荐文章于 2026-10-12 10:43:58 发布 3.3k 阅读 AI 写同款· GEO 优化 ›

框架级多种策略实现接口限流【阅读MallChat频控模块源代码】通过自定义注解的方式结合多种策略实现框架的接口限流功能阅读详情

1、ChatServer

@Slf4j
@ServerEndpoint("/websocket")
@Component
public class ChatServer {
    @OnOpen
    public void onOpen(){
        log.info("---------------------------->on Open");
    }

    @OnClose
    public void OnClose(){
        log.info("---------------------------->on Close");
    }

    @OnMessage
    @SneakyThrows
    public void onMessage(String message, Session session){
        log.info("------------------->message:{}",message);
        for (Session se:session.getOpenSessions()){
            //把消息转发到其他用户
            se.getBasicRemote().sendText(message);
        }
    }
}

2、启动类的修改

因为我们图片采用base64发送，因此内容肯定会很长，有的小的图片可以发（比如1-2k这种）

但大的就不行。于是就顺着websocket发送内容太长了如何解决的问题
即加入配置在原来的启动类中实现ServletContextInitializer接口并设置发送内容大小限制。

@SpringBootApplication
public class XiyuemallChatApplication implements ServletContextInitializer {

    public static void main(String[] args) {
        SpringApplication.run(XiyuemallChatApplication.class, args);
    }
    //添加websocket支持
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){

        return new ServerEndpointExporter();
    }

    @Override
    public void onStartup(ServletContext servletContext) throws ServletException {
     servletContext.setInitParameter("org.apache.tomcat.websocket.textBufferSize","1024000");
    }
}

前端页面

<!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:8989/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){
            //websocket发送文本消息
            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});
                //websocket发送图片消息
                ws.send(s)
            }
        }
    }
</script>
</body>
</html>

收录于