基於SpringBoot+WebSocket搭建一個簡單的多人聊天系統

前言

  今天閒來無事，就來了解一下WebSocket協議。來簡單瞭解一下吧。

WebSocket是什麼

  首先了解一下WebSocket是什麼？WebSocket是一種在單個TCP鏈接上進行全雙工通訊的協議。這是一種比較官方的說法，簡單點來講就是，在一次TCP鏈接中，通訊的雙方能夠相互通訊。好比A和B在打電話，A說話的時候，B也能夠說話來進行信息的交互，這就叫作全雙工通訊。對應的是單工通訊，和半雙工通訊，單工通訊就是隻能由A向B通訊，好比電腦和打印機。半雙工通訊是能夠AB能夠互相通訊，可是同一時間只能進行單向通訊，好比對講機。

WebSocket與http有啥區別

相同點

  都創建在TCP之上，經過TCP協議來傳輸數據。

不一樣點

  HTTP協議爲單向協議，即瀏覽器只能向服務器請求資源，服務器才能將數據傳送給瀏覽器，而服務器不能主動向瀏覽器傳遞數據。分爲長鏈接和短鏈接，短鏈接是每次http請求時都須要三次握手才能發送本身的請求，每一個request對應一個response；長鏈接是短期內保持鏈接，保持TCP不斷開，指的是TCP鏈接。

  WebSocket一種雙向通訊協議，在創建鏈接後，WebSocket服務器和客戶端都能主動的向對方發送或接收數據，就像Socket同樣，不一樣的是WebSocket是一種創建在Web基礎上的一種簡單模擬Socket的協議；WebSocket須要經過握手鍊接，相似於TCP它也須要客戶端和服務器端進行握手鍊接，鏈接成功後才能相互通訊。WebSocket在創建握手鍊接時，數據是經過http協議傳輸的，「GET/chat HTTP/1.1」，這裏面用到的只是http協議一些簡單的字段。可是在創建鏈接以後，真正的數據傳輸階段是不須要http協議參與的。

用處

  WebSocket解決客戶端發起多個http請求到服務器資源瀏覽器必需要通過長時間的輪詢問題。

使用WebSocket搭建一個多人聊天系統

1. 引入WebSocket的jar包

Gradle：

compile group: 'org.springframework.boot', name: 'spring-boot-starter-websocket', version: '2.1.8.RELEASE'複製代碼

Maven：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
    <version>2.1.8.RELEASE</version>
</dependency>複製代碼

1. 添加對WebSocket的支持

  注入ServerEndpointExporter，這個bean會自動註冊使用了@ServerEndpoint註解聲明的Websocket endpoint。

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

/**
 * @author: zp
 * @Date: 2019-09-18 10:03
 * @Description:
 */
@Configuration
public class AppConfiguration {

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

}
複製代碼

1. 建立WebSocket的實現類

  @ServerEndpoint("/webSocket/{page}")中的值就是須要訪問的地址，和Controller中的@RequestMapping有點相似。而後實現@OnOpen（打開鏈接）,@OnClose（關閉鏈接）,@onMessage（收到消息）,@Error（觸發異常）。

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
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.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * @author: zp
 * @Date: 2019-09-20 15:12
 * @Description:
 */
@Component
@ServerEndpoint("/webSocket/{page}")
public class WebSocket {
    private Logger log = LoggerFactory.getLogger(this.getClass());

    /**
     * 用來記錄房間的人數
     */
    private static AtomicInteger onlinePersons = new AtomicInteger(0);

    /**
     * 用來記錄房間及人數
     */
    private static Map<String,Set> roomMap = new ConcurrentHashMap(8);

    @OnOpen
    public void open(@PathParam("page") String page, Session session) throws IOException {
        Set set = roomMap.get(page);
        // 若是是新的房間，則建立一個映射，若是房間已存在，則把用戶放進去
        if(set == null){
            set = new CopyOnWriteArraySet();
            set.add(session);
            roomMap.put(page,set);
        }else{
            set.add(session);
        }
        // 房間人數+1
        onlinePersons.incrementAndGet();
        log.info("新用戶{}進入聊天,房間人數:{}",session.getId(),onlinePersons);
    }

    @OnClose
    public void close(@PathParam("page") String page, Session session){
        // 若是某個用戶離開了，就移除相應的信息
        if(roomMap.containsKey(page)){
            roomMap.get(page).remove(session);
        }
        // 房間人數-1
        onlinePersons.decrementAndGet();
        log.info("用戶{}退出聊天,房間人數:{}",session.getId(),onlinePersons);
    }

    @OnMessage
    public void reveiveMessage(@PathParam("page") String page, Session session,String message) throws IOException {
        log.info("接受到用戶{}的數據:{}",session.getId(),message);
        // 拼接一下用戶信息
        String msg = session.getId()+" : "+ message;
        Set<Session> sessions = roomMap.get(page);
        // 給房間內全部用戶推送信息
        for(Session s : sessions){
            s.getBasicRemote().sendText(msg);
        }
    }

    @OnError
    public void error(Throwable throwable){
        try {
            throw throwable;
        } catch (Throwable e) {
            log.error("未知錯誤");
        }
    }
}複製代碼

寫個超級簡單的頁面測試一下

  前端有點菜，寫不出好看的ui，見諒～

<html>
<head>
    <meta charset="UTF-8"></meta>
    <title>springboot項目WebSocket測試demo</title>
</head>
<body>
<h3>springboot項目websocket測試demo</h3>
<h4>測試說明</h4>
<h5>文本框中數據數據，點擊‘發送測試’，文本框中的數據會發送到後臺websocket，後臺接受到以後，會再推送數據到前端，展現在下方；點擊關閉鏈接，能夠關閉該websocket；能夠跟蹤代碼，瞭解具體的流程；代碼上有詳細註解</h5>
<br />
<input id="text" type="text" />
<button onclick="send()">發送測試</button>
<hr />
<button onclick="clos()">關閉鏈接</button>
<hr />
<div id="message"></div>
<script>
    var websocket = null;
    if('WebSocket' in window){
        websocket = new WebSocket("ws://127.0.0.1:9999/webSocket/1");
    }else{
        alert("您的瀏覽器不支持websocket");
    }
    websocket.onerror = function(){
        setMessageInHtml("send error！");
    }
    websocket.onopen = function(){
        setMessageInHtml("鏈接成功！")
        setTimeout(function(){setMessageInHtml("歡迎來到這裏！")
    },2000)
    }
    websocket.onmessage = e => setMessageInHtml(e.data)
    websocket.onclose = function(){
        setMessageInHtml("鏈接斷開！")
    }
    window.onbeforeunload = function(){
        clos();
    }
    function setMessageInHtml(message){
        document.getElementById('message').innerHTML += message+"</br>";
    }
    function clos(){
        websocket.close(3000,"強制關閉");
    }
    function send(){
        var msg = document.getElementById('text').value;
        websocket.send(msg);
    }
</script>
</body>
</html>複製代碼

測試

後記

  但願咱們天天都有一點小收穫～

若是以爲有用就關注我吧～