Spring內建webSocket詳解

踩坑總結

因為之前從來沒有接觸過，是以網上找了很多教程最後發現都不怎麼完整，大多數都是直接全盤照抄《Spring Boot》一書中的相關示例，沒有做任何修改，沒有說明為什麼一定要用spring security，而下面的教程自己也是踩了不少坑，如前後分離中session一直擷取不到，導緻無法連結上，uid不可為中文，websocket自帶協定和服務，導緻前後端分離一直報跨域的錯誤等等。當然websocket一些解釋在這邊就不多說了，相信你已經看了很多教程了，我們就直接上配置教程

前端配置

前端配置相對比較簡單，主要就是websocket服務的注冊，消息的發送和接收。比較關鍵的點：uid的定義。

// 使用者的特殊标志，一般用id或者生成的uuid，背景為Long，不可帶有中文，并且這些值如果從session中擷取，需要注意前後端分離帶來的session，否則會報錯,這些參數主要對應着背景的message類，用于資訊的發送
    let from = '';
    let fromName = '';
    let to = ;
    let host = window.location.host;
    let webSocket = "";
    // 不同的浏覽器對websocket的支援不同
    if ('WebSocket' in window) {
    // 最關鍵的點，ws必須加上，不可用http，因為兩者的協定是不同的，websocket有自帶的請求協定，uid是為了将使用者的id注冊到websocket的服務中
        webSocket = new WebSocket("ws://127.0.0.1:8090/ws?uid=" + from);
    } else if ('MozWebSocket' in window) {
        webSocket = new MozWebSocket("ws://" + host + "/ws" + from);
    } else {
        webSocket = new SockJS("ws://" + host + "/ws/sockjs" + from);
    }
    // 連結，錯誤，關閉，收到消息相關的回掉函數
    webSocket.onopen = function (event) {
        console.log("WebSocket:已連接配接");
    };
    webSocket.onerror = function (event) {
        console.log("WebSocket:發生錯誤 ");
        console.log(event);
    };
    webSocket.onclose = function (event) {
        console.log("WebSocket:已關閉");
        console.log(event);
    };
    webSocket.onmessage = function (event) {
    // 接收到的消息的對象
        let data = JSON.parse(event.data);
    };
    // 發送消息的執行個體
    function sendMsg() {
        let data = {};
        data["from"] = from;
        data["fromName"] = fromName;
        data["to"] = to;
        data["text"] = "我發給你一條資訊";
        webSocket.send(JSON.stringify(data));
    }

後端配置

先添加maven相關依賴
       <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.2.2</version>
        </dependency>

1. 注冊websocket服務（前端連結的url位址）

import javax.annotation.Resource;


import org.springframework.stereotype.Component;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;


 /**
 * 描述:
 * WebScoket配置處理器
 *
 * @author Msater Zg
 * @create 2018-01-24 10:49
 */
@Component
@EnableWebSocket
public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {
    /**
     * 背景寫好服務，項目啟動的時候，注冊好這兩個服務，以供前台調用
     */
    @Resource
    MyWebSocketHandler handler;


    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        // 連結的時候，websocket會自己增加同源檢測的功能，需要單獨配置是否允許跨域，我配置*代表允許所有的ip進行調用。
        registry.addHandler(handler, "/ws").addInterceptors(new HandShake()).setAllowedOrigins("*");
        registry.addHandler(handler, "/ws/sockjs").addInterceptors(new HandShake()).setAllowedOrigins("*").withSockJS();
    }
}

2. 握手之前的配置（需要将使用者相關uid注冊到WebSocketSession中，而這個uid你可以用token，session等等來代替，因為是前端分離，是以我直接用了使用者的id）

import java.util.Map;
import javax.servlet.http.HttpSession;


import org.springframework.http.HttpHeaders;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;


 /**
 * 描述:
 * Socket建立連接配接（握手）和斷開
 *
 * @author Msater Zg
 * @create 2018-01-24 10:49
 */
public class HandShake implements HandshakeInterceptor {
    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
                                   Map<String, Object> attributes) throws Exception {
        /**
         * websocket系統啟動連接配接程式，啟動的時候就會把他的session值傳過來，放入到websocketsession（websocket的一個内置伺服器）裡面
         */
        ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
        Long uid = Long.parseLong(servletRequest.getServletRequest().getParameter("uid"));
        if (uid != ) {
            attributes.put("uid", uid);
        } else {
            return false;
        }
        return true;
    }


    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
                               Exception exception) {
    }
}

3. 消息推送的相關的背景的方法

import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Map.Entry;


import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.WebSocketMessage;
import org.springframework.web.socket.WebSocketSession;


  /**
 * 描述:
 * Socket處理器(包括發送資訊，接收資訊，資訊錯誤等方法。)
 *
 * @author Msater Zg
 * @create 2018-01-24 10:49
 */
@Component
public class MyWebSocketHandler implements WebSocketHandler {
    /**
     * 最重要的websocket處理程式（包括發送資訊，接收資訊，資訊錯誤等方法。）
     */


    /**
     * 先注冊一個websocket伺服器，将連接配接上的所有使用者放進去
     */
    public static final Map<Long, WebSocketSession> USER_SOCKET_SESSION_MAP;


    static {
        USER_SOCKET_SESSION_MAP = new HashMap<Long, WebSocketSession>();
    }


    /**
     * 前台連接配接并且注冊了賬戶
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        Long uid = (Long) session.getAttributes().get("uid");
        if (USER_SOCKET_SESSION_MAP.get(uid) == null) {
            USER_SOCKET_SESSION_MAP.put(uid, session);
        }
    }


    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
        if (message.getPayloadLength() == ) {
            return;
        }
        NotificationMessage msg = new Gson().fromJson(message.getPayload().toString(), NotificationMessage.class);
        msg.setDate(new Date());
        sendMessageToUser(msg.getTo(), new TextMessage(new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create().toJson(msg)));
    }


    /**
     * 消息傳輸錯誤處理，如果出現錯誤直接斷開連接配接
     */
    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        if (session.isOpen()) {
            session.close();
        }
        removeWebSocketUser(session);
    }


    /**
     * 關閉連接配接後
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
        System.out.println("Websocket:" + session.getId() + "已經關閉");
        removeWebSocketUser(session);
    }


    @Override
    public boolean supportsPartialMessages() {
        return false;
    }


    /**
     * 給所有線上使用者發送消息
     *
     * @param message
     * @throws IOException
     */
    public void broadcast(final TextMessage message) throws IOException {
        Iterator<Entry<Long, WebSocketSession>> it = USER_SOCKET_SESSION_MAP.entrySet().iterator();
        // 多線程群發（給所有線上的使用者發送消息）  先判斷是否裡面有使用者（）然後循環發消息
        /*背景調用sendMessage方法的時候，前台會觸發onmessage*/
        while (it.hasNext()) {
            final Entry<Long, WebSocketSession> entry = it.next();
            if (entry.getValue().isOpen()) {
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        try {
                            if (entry.getValue().isOpen()) {
                                entry.getValue().sendMessage(message);
                            }
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    }
                }).start();
            }
        }
    }


    /**
     * 單個使用者發消息
     *
     * @param message
     * @throws IOException
     */
    public void sendMessageToUser(Long uid, TextMessage message) throws IOException {
        //根據傳過來的賬号，在websocketseesion的伺服器裡面找，接收者注冊的賬号
        WebSocketSession session = USER_SOCKET_SESSION_MAP.get(uid);
        if (session != null && session.isOpen()) {
            session.sendMessage(message);
        }
    }


    public void removeWebSocketUser(WebSocketSession session) {
        Iterator<Entry<Long, WebSocketSession>> it = USER_SOCKET_SESSION_MAP.entrySet().iterator();
        // 移除Socket會話
        while (it.hasNext()) {
            Entry<Long, WebSocketSession> entry = it.next();
            if (entry.getValue().getId().equals(session.getId())) {
                USER_SOCKET_SESSION_MAP.remove(entry.getKey());
                break;
            }
        }
    }
}

4. 消息類（可根據不同的需求進行修改）

import java.util.Date;
/**
 * 描述:
 * 消息類
 *
 * @author Msater Zg
 * @create 2018-02-24 10:49
 */
public class NotificationMessage {
    /**
     * 發送者賬号
     */
    public Long from;
    /**
     * 發送者名稱
     */
    public String fromName;
    /**
     * 接收者賬号
     */
    public Long to;
    /**
     * 發送的内容
     */
    public String text;
    /**
     * 發送的日期
     */
    public Date date;


    public Long getFrom() {
        return from;
    }


    public void setFrom(Long from) {
        this.from = from;
    }


    public Long getTo() {
        return to;
    }


    public void setTo(Long to) {
        this.to = to;
    }


    public String getText() {
        return text;
    }


    public void setText(String text) {
        this.text = text;
    }


    public String getFromName() {
        return fromName;
    }


    public void setFromName(String fromName) {
        this.fromName = fromName;
    }


    public Date getDate() {
        return date;
    }


    public void setDate(Date date) {
        this.date = date;
    }
}

後續

大緻原理就是背景啟動websocket服務，前端使用者注冊并在websocket自帶session服務中放這兒值，而後續的消息發送，就是給websocketsession中的使用者發送消息，然後前端進行響應，以上都是自己一些看法，有什麼問題還希望指出

Spring內建webSocket詳解

踩坑總結

前端配置

後端配置

後續

最後附上自己封裝的starter源碼git位址（歡迎star）：https://github.com/zg091418/websocketspringbootstarter

繼續閱讀

MyBatis-Plus 之AR模式

馴服爛代碼_馴服Tomcat：Tomcat 5的過濾技巧

基于Springboot+VUE+Mysql的大學生校園疫情防控管理系統

Using MessageConverter

馴服爛代碼_C＃中的馴服配置

Spring Cloud整合Sleuth，當請求完成後，Zipkin沒有鍊路資訊

JAVA自學之路——馬士兵

Rabbitmq指令行手動建立隊列

整合 Spring 開發架構及服務端技術

SSM整合02---Spring-SpringMVC層一、添加web架構支援二、web.xml三、spring-mvc.xml

SSM架構（二）------------表現層的SpringMVC

Intellij idea基于Maven 的SSM 架構整合

Spring資料和Redis

SpringMVC的啟動過程源碼分析1 SpringMVC 配置XML的方式啟動2 SpringMVC純注解模式啟動

Java Spring 架構

SpringCloud微服務（四）之ribbon筆記ribbon是什麼？入門案例自定義均衡負載算法