SpringBoot WebSocket使用

浅浅的花香味﹌ 2022-05-29 05:05 179阅读 0赞

由于SpringBoot已经整合了WebSocket，使用起来非常方便。这篇博客的前提是已经搭建好SpringBoot项目，如果没有搭建好，请参考[http://blog.csdn.net/u010889616/article/details/79561808][http_blog.csdn.net_u010889616_article_details_79561808]这篇文章。

项目结构如下：

> ![20180317152105971][]

gradle添加依赖

// https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-websocket
        compile group: 'org.springframework.boot', name: 'spring-boot-starter-websocket', version: '2.0.0.RELEASE'

（1）开启WebSocket服务。

新建WebSocketConfig.java类，添加@Configuration注解

package com.wzj.demo.websocket;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.socket.server.standard.ServerEndpointExporter;
    
    /**
     * Created by wzj on 2018/3/14.
     */
    @Configuration
    public class WebSocketConfig
    {
        @Bean
        public ServerEndpointExporter serverEndpointExporter()
        {
            return new ServerEndpointExporter();
        }
    }

（2）配置/websocket站点

使用@ServerEndpoint注解来配置/websocket站点，来让前端访问，每一个函数都有注释。

package com.wzj.demo.websocket;
    
    import org.springframework.stereotype.Component;
    
    import javax.websocket.OnClose;
    import javax.websocket.OnMessage;
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    import java.util.List;
    import java.util.concurrent.CopyOnWriteArrayList;
    
    /**
     * Created by wzj on 2018/3/14.
     */
    @ServerEndpoint(value = "/websocket")
    @Component
    public class MyWebSocket
    {
        /**
         * 在线人数
         */
        public static int onlineNumber = 0;
    
        /**
         * 所有的对象
         */
        public static List<MyWebSocket> webSockets = new CopyOnWriteArrayList<MyWebSocket>();
    
        /**
         * 会话
         */
        private Session session;
    
        /**
         * 建立连接
         *
         * @param session
         */
        @OnOpen
        public void onOpen(Session session)
        {
            onlineNumber++;
            webSockets.add(this);
    
            this.session = session;
    
            System.out.println("有新连接加入！ 当前在线人数" + onlineNumber);
        }
    
        /**
         * 连接关闭
         */
        @OnClose
        public void onClose()
        {
            onlineNumber--;
            webSockets.remove(this);
            System.out.println("有连接关闭！ 当前在线人数" + onlineNumber);
        }
    
        /**
         * 收到客户端的消息
         *
         * @param message 消息
         * @param session 会话
         */
        @OnMessage
        public void onMessage(String message, Session session)
        {
            System.out.println("来自客户端消息：" + message);
    
            sendMessage("欢迎连接");
        }
    
        /**
         * 发送消息
         *
         * @param message 消息
         */
        public void sendMessage(String message)
        {
            try
            {
                session.getBasicRemote().sendText(message);
            }
            catch (IOException e)
            {
                e.printStackTrace();
            }
        }
    }

（3）在webapp/WEB-INF/jsp目录，新建index.jsp文件

webSocket = new WebSocket("ws://localhost:8080/websocket");  //连接本地后台的/websocket服务

webSocket有三个响应事件onopen（服务连通）、onmesage（收到消息）、onclose（连接被关闭）

<%--
      Created by IntelliJ IDEA.
      User: wzj
      Date: 2016/10/8
      Time: 21:24
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Index</title>
    </head>
    <body>
    
        <div>你好</div>
        <div id="message"></div>
    
        <canvas id="canvas" style="border: 1px solid red;"></canvas>
    </body>
    </html>
    <script>
    
        var webSocket;
        if (window.WebSocket)
        {
            webSocket = new WebSocket("ws://localhost:8080/websocket");
    
            //连通之后的回调事件
            webSocket.onopen = function()
            {
                webSocket.send("发送数据");
            };
    
            //接收后台服务端的消息
            webSocket.onmessage = function (evt)
            {
                var received_msg = evt.data;
                alert("数据已接收:" + received_msg);
            };
    
            //连接关闭的回调事件
            webSocket.onclose = function()
            {
                alert("连接已关闭...");
            };
    
        }
    
    </script>

（4）在Controller配置url，来访问index.jsp页面

package com.wzj.demo.controller;
    
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.servlet.ModelAndView;
    
    /**
     * Created by wzj on 2018/3/14.
     */
    @RestController
    public class WelcomeController
    {
        /**
         * 首页
         * @return 测试
         */
        @RequestMapping(value = "/welcome")
        @ResponseBody
        public String welcome()
        {
            return "Hello World";
        }
    
        @RequestMapping(value = "/index")
        public ModelAndView index(ModelAndView view)
        {
            //设置jsp名字
            view.setViewName("index");
    
            //传递数据
            view.addObject("name","张三");
    
            return view;
        }
    }

（5）测试

启动SpingBoot，在浏览器输入[http://127.0.0.1:8080/index][http_127.0.0.1_8080_index]，就会发现日志中打印出，有客户端连接，并收到消息。

![20180317153105546][]

在浏览器端也收到消息

![20180317153207010][]

Demo Github地址： [https://github.com/HelloKittyNII/SpringBoot/tree/master/SpringBootDemo][https_github.com_HelloKittyNII_SpringBoot_tree_master_SpringBootDemo]

[http_blog.csdn.net_u010889616_article_details_79561808]: http://blog.csdn.net/u010889616/article/details/79561808
[20180317152105971]: /images/20220529/a823aaa6037d497999a491ab0d81ae0d.png
[http_127.0.0.1_8080_index]: http://127.0.0.1:8080/index
[20180317153105546]: /images/20220529/93d43890c26a41cc93215875ef477cef.png
[20180317153207010]: /images/20220529/bd771b02e4e54d45b73bc4cc723eadeb.png
[https_github.com_HelloKittyNII_SpringBoot_tree_master_SpringBootDemo]: https://github.com/HelloKittyNII/SpringBoot/tree/master/SpringBootDemo