SpringBoot整合WebSocket實現前后端互推消息

　　小編寫這篇文章是為了記錄實現WebSocket的過程，受不了啰嗦的同學可以直接看代碼。

　　前段時間做項目時設計了一個廣播的場景，具體業務不再贅述，最終要實現的效果就是平台接收到的信息實時發布給所有的用戶，其實就是后端主動向前端廣播消息。

這樣的場景可以讓前端輪詢實現，但是要達到接近實時獲取信息的效果就需要前端短周期的輪詢，HTTP請求包含較長的頭部，其中真正有效的數據可能只是很小的一

部分，顯然這樣會浪費很多的帶寬等資源，周期越短服務器壓力越大，如果用戶量太大的話就杯具了。所以小編就想到了WebSocket，可以完美實現需求。

　　

　　1、什么是WebSocket

　　WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向

客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。

　　在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。HTML5 定

義的 WebSocket 協議，能更好的節省服務器資源和帶寬，並且能夠更實時地進行通訊。

　　2、實現原理

 

 

　　可以看到，瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過 TCP 連接直接交換數據。第一次握手是基

於HTTP協議實現的，當獲取 Web Socket 連接后，就可以通過 send() 方法來向服務器發送數據，並通過 onmessage 事件來接收服務器返回的數據。

　　3、具體實現

　　WebSocket的優點不言而喻，下面直接上代碼。

　　1、首先創建一個springboot項目，網上教程很多，也可以參考樓主的創建SpringBoot項目，很簡單，最終的目錄結構如下：

 

 　2、項目的pom.xml如下：

　　

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.5.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.winmine</groupId>
    <artifactId>WebSocket</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>WebSocket</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.46</version>
        </dependency>

    </dependencies>


    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

　　引入WebSocket的標簽就是：

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

　　3、application.properties中配置端口號，樓主的是22599的端口號。

server.port=22599

 

　　4、配置類

　　

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {
    /**
     * ServerEndpointExporter 作用
     *
     * 這個Bean會自動注冊使用@ServerEndpoint注解聲明的websocket endpoint
     *
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

　　5、核心類

　　

package com.winmine.WebSocket.service;

import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicInteger;

@ServerEndpoint("/webSocket/{sid}")
@Component
public class WebSocketServer {
    //靜態變量，用來記錄當前在線連接數。應該把它設計成線程安全的。
    private static AtomicInteger onlineNum = new AtomicInteger();

    //concurrent包的線程安全Set，用來存放每個客戶端對應的WebSocketServer對象。
    private static ConcurrentHashMap<String, Session> sessionPools = new ConcurrentHashMap<>();

    //發送消息
    public void sendMessage(Session session, String message) throws IOException {
        if(session != null){
            synchronized (session) {
//                System.out.println("發送數據：" + message);
                session.getBasicRemote().sendText(message);
            }
        }
    }
    //給指定用戶發送信息
    public void sendInfo(String userName, String message){
        Session session = sessionPools.get(userName);
        try {
            sendMessage(session, message);
        }catch (Exception e){
            e.printStackTrace();
        }
    }

    //建立連接成功調用
    @OnOpen
    public void onOpen(Session session, @PathParam(value = "sid") String userName){
        sessionPools.put(userName, session);
        addOnlineCount();
        System.out.println(userName + "加入webSocket！當前人數為" + onlineNum);
        try {
            sendMessage(session, "歡迎" + userName + "加入連接！");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    //關閉連接時調用
    @OnClose
    public void onClose(@PathParam(value = "sid") String userName){
        sessionPools.remove(userName);
        subOnlineCount();
        System.out.println(userName + "斷開webSocket連接！當前人數為" + onlineNum);
    }

    //收到客戶端信息
    @OnMessage
    public void onMessage(String message) throws IOException{
        message = "客戶端：" + message + ",已收到";
        System.out.println(message);
        for (Session session: sessionPools.values()) {
            try {
                sendMessage(session, message);
            } catch(Exception e){
                e.printStackTrace();
                continue;
            }
        }
    }

    //錯誤時調用
    @OnError
    public void onError(Session session, Throwable throwable){
        System.out.println("發生錯誤");
        throwable.printStackTrace();
    }

    public static void addOnlineCount(){
        onlineNum.incrementAndGet();
    }

    public static void subOnlineCount() {
        onlineNum.decrementAndGet();
    }

}

　　6、在Controller中跳轉頁面

import com.winmine.WebSocket.service.WebSocketServer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import java.util.HashMap;
import java.util.Map;

@Controller
public class SocketController {

    @Autowired
    private WebSocketServer webSocketServer;

    @RequestMapping("/index")
    public String index() {
        return "index";
    }

    @GetMapping("/webSocket")
    public ModelAndView socket() {
        ModelAndView mav=new ModelAndView("/webSocket");
//        mav.addObject("userId", userId);
        return mav;
    }


}

 

　　7、前端代碼在webSocket.html中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>

</head>
<body>
<h3>hello socket</h3>
<p>【userId】：<div><input id="userId" name="userId" type="text" value="10"></div>
<p>【toUserId】：<div><input id="toUserId" name="toUserId" type="text" value="20"></div>
<p>【toUserId】：<div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>
<p>操作:<div><a onclick="openSocket()">開啟socket</a></div>
<p>【操作】：<div><a onclick="sendMessage()">發送消息</a></div>
</body>
<script>
    

    var socket;
    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的瀏覽器不支持WebSocket");
        }else{
            console.log("您的瀏覽器支持WebSocket");
            //實現化WebSocket對象，指定要連接的服務器地址與端口  建立連接
            var userId = document.getElementById('userId').value;
            // var socketUrl="ws://127.0.0.1:22599/webSocket/"+userId;
            var socketUrl="ws://192.168.0.231:22599/webSocket/"+userId;
            console.log(socketUrl);
            if(socket!=null){
                socket.close();
                socket=null;
            }
            socket = new WebSocket(socketUrl);
            //打開事件
            socket.onopen = function() {
                console.log("websocket已打開");
                //socket.send("這是來自客戶端的消息" + location.href + new Date());
            };
            //獲得消息事件
            socket.onmessage = function(msg) {
                var serverMsg = "收到服務端信息：" + msg.data;
                console.log(serverMsg);
                //發現消息進入    開始處理前端觸發邏輯
            };
            //關閉事件
            socket.onclose = function() {
                console.log("websocket已關閉");
            };
            //發生了錯誤事件
            socket.onerror = function() {
                console.log("websocket發生了錯誤");
            }
        }
    }
    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的瀏覽器不支持WebSocket");
        }else {
            // console.log("您的瀏覽器支持WebSocket");
            var toUserId = document.getElementById('toUserId').value;
            var contentText = document.getElementById('contentText').value;
            var msg = '{"toUserId":"'+toUserId+'","contentText":"'+contentText+'"}';
            console.log(msg);
            socket.send(msg);
        }
    }

    </script>
</html>

　　

　　完成以上工作，就可以啟動項目測試了。

　　在瀏覽器登錄系統，http://127.0.0.1:22599/webSocket

 

 　　開啟socket並發送信息，后端打印：

 

 　　前端控制台打印：

 

 　　WebSocket跑通了，這是最基本的案例，把它放入自己的項目中可以按照具體業務進行改進

　　PS：在開發中樓主發現部分IE瀏覽器的版本建立webSocket時失敗，具體問題及解決方法請查看文章：

IE瀏覽器連接WebSocket報錯：java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986