springboot2.x 集成websocket支持发送图片

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地址了，如果有需要可以联系我，如果喜欢我的文章记得关注我😊哦！