springBoot2.0+vue实现websocket通信【最新，亲测有效】

青旅半醒 2022-02-03 09:01 468阅读 0赞

### 先来看下效果，如果是你想要的效果就继续往下面看 ###

![在这里插入图片描述][20190509092625619.gif]  
  
  
*如果你只是单纯的想使用前端或者后端也是可以的*

#### 前端：vue ####

<template>    
    	<div>       
    		<h1>测试webSocket</h1>      
    		<button @click="getWebsocket">点击请求后台数据</button>    
    	</div>    
    </template>
    <script>
    export default {        
    	created() { // 页面创建生命周期函数              
    		this.initWebSocket()        
    	},        
    	destroyed: function () { // 离开页面生命周期函数              
    		this.websocketclose();        
    	},        
    	methods: {            
    		initWebSocket: function () {                
    			// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https                
    			this.websock = new WebSocket("ws://localhost:8185/api/websocket/DPS007");                
    			this.websock.onopen = this.websocketonopen;                
    			this.websock.onerror = this.websocketonerror;                
    			this.websock.onmessage = this.websocketonmessage;                
    			this.websock.onclose = this.websocketclose;              
    		},              
    		websocketonopen: function () {                
    			console.log("WebSocket连接成功");              
    		},              
    		websocketonerror: function (e) {                
    			console.log("WebSocket连接发生错误");              
    		},              
    		websocketonmessage: function (e) {                
    			console.log(e.data);                // console.log(e);              
    		},              
    		websocketclose: function (e) {                
    			console.log("connection closed (" + e.code + ")");              
    		},              
    		getWebsocket:function(){                l
    			et url = "http://localhost:8185/api/teachStf/import?shipId=DPS007"                
    			// 这里只是一个基于axios的ajax请求，你可以换成你的请求格式                
    			this.$ajax.get(url)              
    		}       
    	 }    
    }
    </script>
    <style lang="less" scoped>
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]

#### 后端：java ####

###### 1、WebSocketConfig ######

import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.socket.server.standard.ServerEndpointExporter;
    
    @Configuration
    public class WebSocketConfig {
    
       @Bean
       public ServerEndpointExporter serverEndpointExporter() {
          return new ServerEndpointExporter();
       }
    }

###### 2、WebSocket ######

package com.xdx97.party.common.config;
    
    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.PathParam;
    import javax.websocket.server.ServerEndpoint;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.concurrent.CopyOnWriteArraySet;
    
    @Component
    @ServerEndpoint("/websocket/{shopId}")
    //此注解相当于设置访问URL
    public class WebSocket {
    
        private Session session;
    
        private static CopyOnWriteArraySet<WebSocket> webSockets =new CopyOnWriteArraySet<>();
        private static Map<String,Session> sessionPool = new HashMap<String,Session>();
    
        @OnOpen
        public void onOpen(Session session, @PathParam(value="shopId")String shopId) {
            this.session = session;
            webSockets.add(this);
            sessionPool.put(shopId, session);
            System.out.println("【websocket消息】有新的连接，总数为:"+webSockets.size());
        }
    
        @OnClose
        public void onClose() {
            webSockets.remove(this);
            System.out.println("【websocket消息】连接断开，总数为:"+webSockets.size());
        }
    
        @OnMessage
        public void onMessage(String message) {
            System.out.println("【websocket消息】收到客户端消息:"+message);
        }
    
        // 此为广播消息
        public void sendAllMessage(String message) {
            for(WebSocket webSocket : webSockets) {
                System.out.println("【websocket消息】广播消息:"+message);
                try {
                    webSocket.session.getAsyncRemote().sendText(message);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
    
        // 此为单点消息 (发送文本)
        public void sendTextMessage(String shopId, String message) {
            Session session = sessionPool.get(shopId);
            if (session != null) {
                try {
                    session.getBasicRemote().sendText(message);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
    
        // 此为单点消息 (发送对象)
        public void sendObjMessage(String shopId, Object message) {
            Session session = sessionPool.get(shopId);
            if (session != null) {
                try {
                    session.getAsyncRemote().sendObject(message);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
    
    }

###### 3、测试 ######

你后台写一个请求的方法，把下面代码放进去就好了

for (int i = 0; i < 10; i++){
        Thread.sleep(1000);
        webSocket.sendTextMessage(shipId, ""+i);
    }

并且注入webSocket

@Autowired
    private WebSocket webSocket;

给你看看我的方法做参考  
![在这里插入图片描述][20190509094215116.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]

**鉴于有几个小伙伴需要源码，我又重新写了这个demo，获取方式关注公众号后台回复：WebSocketDemo**

各位老哥，如果对你有帮助，关注后可否不取消。  
![在这里插入图片描述][20200113171049990.jpg]

[20190509092625619.gif]: /images/20220203/54a18435d9134c79a7a21520d5dca495.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20220203/bea8d057dcb74ba3b212b8e31b0bd2b0.png
[20190509094215116.png]: /images/20220203/c726aac2f6ca4dbb9c4338b393dfaa5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20220203/b8defd4460994f8fb38ceab64b266176.png
[20200113171049990.jpg]: /images/20220203/7f633f9f873b415e9b4dc21c3ae90fab.png