Spring集成webSocket詳解

踩坑總結(jié)

因?yàn)橹皬膩?lái)沒(méi)有接觸過(guò)，所以網(wǎng)上找了很多教程最后發(fā)現(xiàn)都不怎么完整，大多數(shù)都是直接全盤照抄《Spring Boot》一書中的相關(guān)示例，沒(méi)有做任何修改，沒(méi)有說(shuō)明為什么一定要用spring security，而下面的教程自己也是踩了不少坑，如前后分離中session一直獲取不到，導(dǎo)致無(wú)法鏈接上，uid不可為中文，websocket自帶協(xié)議和服務(wù)，導(dǎo)致前后端分離一直報(bào)跨域的錯(cuò)誤等等。當(dāng)然websocket一些解釋在這邊就不多說(shuō)了，相信你已經(jīng)看了很多教程了，我們就直接上配置教程

前端配置

前端配置相對(duì)比較簡(jiǎn)單，主要就是websocket服務(wù)的注冊(cè)，消息的發(fā)送和接收。比較關(guān)鍵的點(diǎn)：uid的定義。

    // 用戶的特殊標(biāo)志，一般用id或者生成的uuid，后臺(tái)為L(zhǎng)ong，不可帶有中文，并且這些值如果從session中獲取，需要注意前后端分離帶來(lái)的session，否則會(huì)報(bào)錯(cuò),這些參數(shù)主要對(duì)應(yīng)著后臺(tái)的message類，用于信息的發(fā)送
    let from = '';
    let fromName = '';
    let to = 5521;
    let host = window.location.host;
    let webSocket = "";
    // 不同的瀏覽器對(duì)websocket的支持不同
    if ('WebSocket' in window) {
    // 最關(guān)鍵的點(diǎn)，ws必須加上，不可用http，因?yàn)閮烧叩膮f(xié)議是不同的，websocket有自帶的請(qǐng)求協(xié)議，uid是為了將用戶的id注冊(cè)到websocket的服務(wù)中
        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);
    }
    // 鏈接，錯(cuò)誤，關(guān)閉，收到消息相關(guān)的回掉函數(shù)
    webSocket.onopen = function (event) {
        console.log("WebSocket:已連接");
    };
    webSocket.onerror = function (event) {
        console.log("WebSocket:發(fā)生錯(cuò)誤 ");
        console.log(event);
    };
    webSocket.onclose = function (event) {
        console.log("WebSocket:已關(guān)閉");
        console.log(event);
    };
    webSocket.onmessage = function (event) {
    // 接收到的消息的對(duì)象
        let data = JSON.parse(event.data);
    };
    // 發(fā)送消息的實(shí)例
    function sendMsg() {
        let data = {};
        data["from"] = from;
        data["fromName"] = fromName;
        data["to"] = to;
        data["text"] = "我發(fā)給你一條信息";
        webSocket.send(JSON.stringify(data));
    }

后端配置

先添加maven相關(guān)依賴
       <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. 注冊(cè)websocket服務(wù)（前端鏈接的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 {
    /**
     * 后臺(tái)寫好服務(wù)，項(xiàng)目啟動(dòng)的時(shí)候，注冊(cè)好這兩個(gè)服務(wù)，以供前臺(tái)調(diào)用
     */
    @Resource
    MyWebSocketHandler handler;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        // 鏈接的時(shí)候，websocket會(huì)自己增加同源檢測(cè)的功能，需要單獨(dú)配置是否允許跨域，我配置*代表允許所有的ip進(jìn)行調(diào)用。
        registry.addHandler(handler, "/ws").addInterceptors(new HandShake()).setAllowedOrigins("*");
        registry.addHandler(handler, "/ws/sockjs").addInterceptors(new HandShake()).setAllowedOrigins("*").withSockJS();
    }
}
  1. 握手之前的配置（需要將用戶相關(guān)uid注冊(cè)到WebSocketSession中，而這個(gè)uid你可以用token，session等等來(lái)代替，因?yàn)槭乔岸朔蛛x，所以我直接用了用戶的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建立連接（握手）和斷開(kāi)
 *
 * @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系統(tǒng)啟動(dòng)連接程序，啟動(dòng)的時(shí)候就會(huì)把他的session值傳過(guò)來(lái)，放入到websocketsession（websocket的一個(gè)內(nèi)置服務(wù)器）里面
         */
        ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
        Long uid = Long.parseLong(servletRequest.getServletRequest().getParameter("uid"));
        if (uid != 0) {
            attributes.put("uid", uid);
        } else {
            return false;
        }
        return true;
    }

    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
                               Exception exception) {
    }
}
  1. 消息推送的相關(guān)的后臺(tái)的方法
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處理器(包括發(fā)送信息，接收信息，信息錯(cuò)誤等方法。)
 *
 * @author Msater Zg
 * @create 2018-01-24 10:49
 */
@Component
public class MyWebSocketHandler implements WebSocketHandler {
    /**
     * 最重要的websocket處理程序（包括發(fā)送信息，接收信息，信息錯(cuò)誤等方法。）
     */

    /**
     * 先注冊(cè)一個(gè)websocket服務(wù)器，將連接上的所有用戶放進(jìn)去
     */
    public static final Map<Long, WebSocketSession> USER_SOCKET_SESSION_MAP;

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

    /**
     * 前臺(tái)連接并且注冊(cè)了賬戶
     */
    @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() == 0) {
            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)));
    }

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

    /**
     * 關(guān)閉連接后
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
        System.out.println("Websocket:" + session.getId() + "已經(jīng)關(guān)閉");
        removeWebSocketUser(session);
    }

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

    /**
     * 給所有在線用戶發(fā)送消息
     *
     * @param message
     * @throws IOException
     */
    public void broadcast(final TextMessage message) throws IOException {
        Iterator<Entry<Long, WebSocketSession>> it = USER_SOCKET_SESSION_MAP.entrySet().iterator();
        // 多線程群發(fā)（給所有在線的用戶發(fā)送消息）  先判斷是否里面有用戶（）然后循環(huán)發(fā)消息
        /*后臺(tái)調(diào)用sendMessage方法的時(shí)候，前臺(tái)會(huì)觸發(fā)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();
            }
        }
    }

    /**
     * 單個(gè)用戶發(fā)消息
     *
     * @param message
     * @throws IOException
     */
    public void sendMessageToUser(Long uid, TextMessage message) throws IOException {
        //根據(jù)傳過(guò)來(lái)的賬號(hào)，在websocketseesion的服務(wù)器里面找，接收者注冊(cè)的賬號(hào)
        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會(huì)話
        while (it.hasNext()) {
            Entry<Long, WebSocketSession> entry = it.next();
            if (entry.getValue().getId().equals(session.getId())) {
                USER_SOCKET_SESSION_MAP.remove(entry.getKey());
                break;
            }
        }
    }
}
  1. 消息類（可根據(jù)不同的需求進(jìn)行修改）
import java.util.Date;
/**
 * 描述:
 * 消息類
 *
 * @author Msater Zg
 * @create 2018-02-24 10:49
 */
public class NotificationMessage {
    /**
     * 發(fā)送者賬號(hào)
     */
    public Long from;
    /**
     * 發(fā)送者名稱
     */
    public String fromName;
    /**
     * 接收者賬號(hào)
     */
    public Long to;
    /**
     * 發(fā)送的內(nèi)容
     */
    public String text;
    /**
     * 發(fā)送的日期
     */
    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;
    }
}

后續(xù)

大致原理就是后臺(tái)啟動(dòng)websocket服務(wù)，前端用戶注冊(cè)并在websocket自帶session服務(wù)中放這兒值，而后續(xù)的消息發(fā)送，就是給websocketsession中的用戶發(fā)送消息，然后前端進(jìn)行響應(yīng)，以上都是自己一些看法，有什么問(wèn)題還希望指出

最后附上自己封裝的starter源碼git地址（歡迎star）：https://github.com/zg091418/websocketspringbootstarter
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Web MVC Spring Web MVC 是包含在 Spring 框架中的 Web 框架，建立于...
    Hsinwong閱讀 22,934評(píng)論 1贊 92
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,534評(píng)論 19贊 139
  • Spring Boot 參考指南 介紹 轉(zhuǎn)載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 47,261評(píng)論 6贊 342
  • 我為什么參加21天寫作訓(xùn)練？ 摩西奶奶在其《人生隨時(shí)可以重來(lái)》說(shuō)道“做你最愿意做的那件事，那才是你真正的天賦所在”...
    Elva春萍閱讀 334評(píng)論 0贊 6
  • 從小到大，一直以來(lái)我們每個(gè)人每天都在自覺(jué)或不自覺(jué)的給自己下著定義，我是個(gè)內(nèi)向的人、我是個(gè)外向的人；我是個(gè)慢性子，我...
    黑白無(wú)閱讀 541評(píng)論 0贊 2

友情鏈接更多精彩內(nèi)容