前端WebSocket进行消息实时推送和提示（附代码）

小咪咪 2023-06-19 11:16 41阅读 0赞

功能举例： 通过特定操作实时推送到页面反馈进行弹窗和播放音乐。

先贴源代码地址：[ 点我GO][GO]

--------------------

*  引入pom

创建一个基础的Spring Boot工程（没有特定版本），并在`pom.xml`中引入需要的依赖内容：

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-freemarker</artifactId>
    </dependency>
    
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
    
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>

--------------------

*    配置配置文件（看需要配置） ：

spring.freemarker.template-loader-path=classpath:/templates
    spring.mvc.static-path-pattern=/static/**

--------------------

*   在需要接收消息的页面进行配置 ：

--------------------

*  配置WebSocket Bean ：

@Component
    public class WebSocketConfig {
    
        @Bean
        public ServerEndpointExporter serverEndpointConfigurator(){
            return new ServerEndpointExporter();
        }
    }

--------------------

*  实现webSocket

@Component
    @ServerEndpoint("/webSocket")
    public class WebSocket {
        
        private Session session;
    
        private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();
    
        @OnOpen
        public void onOpen(Session session){
            this.session = session;
            webSocketSet.add(this);
            System.out.println("新的连接 总数:"+webSocketSet.size());
        }
    
    
        @OnClose
        public void onColse(){
            webSocketSet.remove(this);
            System.out.println("断开连接 总数:"+webSocketSet.size());
    
        }
    
        @OnMessage
        public void onMessage(String message){
            System.out.println("收到客户端发来的消息:"+message);
        }
    
        public void sendMessage(String message){
            for (WebSocket webSocket : webSocketSet){
                System.out.println("广播消息:"+message);
                try {
                    webSocket.session.getBasicRemote().sendText(message);
                } catch (IOException e) {
                    e.printStackTrace();
                }
    
            }
        }
    }

--------------------

*  配置触发控制器

@RequestMapping("/shop")
    public class ListController {
    
        @Autowired
        private WebSocket webSocket;
    
        /**
         * 接收推送来的消息的页面
         * @return
         */
        @RequestMapping(value ="/list")
        public String list(){
            return "list";
        }
    
        /**
         * 触发推送
         * 举例：list方法可以是订单列表，这个方法可以是下单的接口，下单后，list的订单列表提示收到新订单。
         * @return
         */
        @RequestMapping(value = "/test")
        @ResponseBody
        public String test(){
            webSocket.sendMessage("hello，来了新数据呢～");
            return "send over,Please return to the list request page。";
        }
    }

--------------------

*  配置websocket响应提示：

websocket.onmessage = function (event) {
            console.log('收到消息：'+event.data)
            alert(event.data);
            var myAuto = document.getElementById('notice');
            console.log('开始播放音乐！15秒后停止...');
            myAuto.play();
            setTimeout(function () {
                myAuto.pause();
                console.log('音乐停止...')
            },15000)
        }

--------------------

*  测试展示：

请求list地址 [http://localhost:8080/shop/list][http_localhost_8080_shop_list]

![format_png][]

后台输出:

![format_png 1][]

--------------------

触发请求条件： [http://localhost:8080/shop/test][http_localhost_8080_shop_test]

![format_png 2][]

list页面接收到消息：

![format_png 3][]

--------------------

查看：

![format_png 4][]

--------------------

![format_png 5][]

如有不当之处,请予指正! 如果你有什么疑问也欢迎随时联系我共同探讨。

Email：wdnnccey\#gmail.com

你配不上自己的野心 也辜负了所受的苦难

[GO]: https://github.com/wdnnccey/websocket-demo
[http_localhost_8080_shop_list]: http://localhost:8080/shop/list
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTAyMDE5MC8yMDE5MDUvMTAyMDE5MC0yMDE5MDUyMTE2MzkwMTE2MC03NTY5MDIwMzMucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTAyMDE5MC8yMDE5MDUvMTAyMDE5MC0yMDE5MDUyMTE2MzkyMDAwMC0xNzcwMzc5MTY4LnBuZw?x-oss-process=image/format,png
[http_localhost_8080_shop_test]: http://localhost:8080/shop/test
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTAyMDE5MC8yMDE5MDUvMTAyMDE5MC0yMDE5MDUyMTE2NDIwNzM5NS0xNDk1MDA4MDg4LnBuZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTAyMDE5MC8yMDE5MDUvMTAyMDE5MC0yMDE5MDUyMTE2NDIxNjI3Mi01Njc0ODA5MzUucG5n?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTAyMDE5MC8yMDE5MDUvMTAyMDE5MC0yMDE5MDUyMTE2NDI1NjMyMS00MTcyOTY5NzYucG5n?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTAyMDE5MC8yMDE5MDUvMTAyMDE5MC0yMDE5MDUyMTE2NDMzOTAzOS0xNzY0NzQzOTYwLnBuZw?x-oss-process=image/format,png