SpringBoot+WebSocket 實現簡易聊天室

這里只介紹大致實現步驟 細節沒有具體 需根據真實操作環境完善細節

第一步：初始化一個SpringBoot工程（配置好需要的亂八七糟的東西，例如mybatis等等,因為這里主要講WebSocket的使用，所以這塊就不太詳細說了）

第二步：導入依賴

pom.xml 添加如下依賴

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <version>2.3.2.RELEASE</version>
        </dependency>

第三步：創建一個WebSocket的配置類

因為我們創建的springboot工程 ，使用的是內置tomcat 所以需要做以下配置

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

第四步：創建一個WebScoket實例

@ServerEndpoint("/websocket/{userid}")
@Component
@Slf4j
public class PmWebSocket {
    //保存在線用戶id以及對應客戶端
    public static Map<String, PmWebSocket> onlineUsers = new ConcurrentHashMap<>();
    /**
     * 用來給客戶端發送消息
     */
    private Session session;
    /**
     * 連接建立成功調用的方法
     */
    @OnOpen
    public void onOpen(Session session,@PathParam("userid") String userid) {
        this.session=session;
        log.info(userid+"連接成功");
       //將用戶id和socket對象保存
        onlineUsers.put(userid,this);
    }

    /**
     * 連接關閉調用的方法
     */
    @OnClose
    public void onClose() {
        System.out.println("有一連接關閉");
    }

    /**
     * 收到客戶端消息后調用的方法
     *
     * @param message 客戶端發送過來的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("來自客戶端的消息:" + message);
    }
    /**
     *發送消息方法
     */
    private void broadcastMsgToAllOnlineUsers(String message) {
                //根據用戶id獲取socket對象 這里userid就是上面連接時候的用戶id 具體怎么傳過來怎么操作 思路很多 你們自己想個思路 
               //如果是聊天室的話 就要把這個消息發送給所有在線用戶 那么就遍歷onlineUsers數組就好了 每個人都發送一次
                PmWebSocket webSocket = onlineUsers.get("userid");
                //獲取推送對象
                RemoteEndpoint.Basic basicRemote = webSocket.session.getBasicRemote();
                try {
                  //發送消息
                    basicRemote.sendText(sendmessage);
                } catch (IOException e) {
                    log.error("廣播發送系統消息失敗！{}", e);
                    e.printStackTrace();
                }
            }
        }
    }
    /**
     * 發生錯誤時調用
     */
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("發生錯誤");
        error.printStackTrace();
    }
}

第五步：前端連接websocket 這里使用的vue   //連接websocket方法 這個放在vue的mounted 或者放在 created里面執行一次就好了 

getWebsocket () { 
 let _this=this
 //連接socket this.ws= new WebSocket("ws://localhost:8081/websocket/"+this.loginid) //連接成功后執行的方法
 this.ws.onopen=function(){ //ws.send("hello")  }
 //收到消息執行的方法 this.ws.onmessage = function (evt) { //獲取數據
 var dataStr = evt.data; var item= JSON.parse(dataStr); _this.message.push(item) //這里就是把獲取到的消息 添加到數組遍歷出來 }
 //這個就是跳轉路由的時候關閉連接socket 因為我做的是單頁面的聊天室 所以做了這個處理 
 this.$router.afterEach(function () { ws.close() }) },

發送消息方法

  sendMessage(){
      this.ws.send(JSON.stringify({
        這里就是消息對象，因為后端要獲取消息的相關信息 所以要轉成json字符串 方便后端操作數據
      }))
    }

大框架都介紹了 細節自己完善 

如果覺得可以別忘點贊關注哦