[WebSocket入門(mén)]手把手搭建WebSocket多人在線聊天室（SpringBoot+WebSocket）

前言

本文中搭建了一個(gè)簡(jiǎn)易的多人聊天室，使用了WebSocket的基礎(chǔ)特性。

源代碼來(lái)自老外的一篇好文：

https://www.callicoder.com/spring-boot-websocket-chat-example/

本文內(nèi)容摘要：

  • 初步理解WebSocket的前后端交互邏輯
  • 手把手使用 SpringBoot + WebSocket 搭建一個(gè)多人聊天室Demo
  • 代碼源碼及其解釋
  • 前端展示頁(yè)面

此外，在下一篇文章中，我們將做到：

  • 對(duì)該WebSocket聊天室進(jìn)行分布式改造，同時(shí)部署多臺(tái)機(jī)器來(lái)作為集群，支撐高并發(fā)。
  • 保存用戶session，并且在集群上實(shí)現(xiàn)session同步，比如實(shí)時(shí)展示當(dāng)前在線的用戶！

正文

WebSocket多人在線聊天室

本文工程源代碼：

https://github.com/qqxx6661/springboot-websocket-demo

新建工程

我們新建一個(gè)SpringBoot2的項(xiàng)目工程，在默認(rèn)依賴中，添加websocket依賴：

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

WebSocket 配置

我們先來(lái)設(shè)置websocket的配置，新建config文件夾，在里面新建類(lèi)WebSocketConfig

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.*;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app");
        registry.enableSimpleBroker("/topic");
    }
}

代碼解釋?zhuān)?/strong>

@EnableWebSocketMessageBroker用于啟用我們的WebSocket服務(wù)器。

我們實(shí)現(xiàn)了WebSocketMessageBrokerConfigurer接口，并實(shí)現(xiàn)了其中的方法。

在第一種方法中，我們注冊(cè)一個(gè)websocket端點(diǎn)，客戶端將使用它連接到我們的websocket服務(wù)器。

withSockJS()是用來(lái)為不支持websocket的瀏覽器啟用后備選項(xiàng)，使用了SockJS。

方法名中的STOMP是來(lái)自Spring框架STOMP實(shí)現(xiàn)。 STOMP代表簡(jiǎn)單文本導(dǎo)向的消息傳遞協(xié)議。它是一種消息傳遞協(xié)議，用于定義數(shù)據(jù)交換的格式和規(guī)則。為啥我們需要這個(gè)東西？因?yàn)閃ebSocket只是一種通信協(xié)議。它沒(méi)有定義諸如以下內(nèi)容：如何僅向訂閱特定主題的用戶發(fā)送消息，或者如何向特定用戶發(fā)送消息。我們需要STOMP來(lái)實(shí)現(xiàn)這些功能。

在configureMessageBroker方法中，我們配置一個(gè)消息代理，用于將消息從一個(gè)客戶端路由到另一個(gè)客戶端。

第一行定義了以“/app”開(kāi)頭的消息應(yīng)該路由到消息處理方法（之后會(huì)定義這個(gè)方法）。

第二行定義了以“/topic”開(kāi)頭的消息應(yīng)該路由到消息代理。消息代理向訂閱特定主題的所有連接客戶端廣播消息。

在上面的示例中，我們使用的是內(nèi)存中的消息代理。

之后也可以使用RabbitMQ或ActiveMQ等其他消息代理。

創(chuàng)建 ChatMessage 實(shí)體

ChatMessage用來(lái)在客戶端和服務(wù)端中交互

我們新建model文件夾，創(chuàng)建實(shí)體類(lèi)ChatMessage。

public class ChatMessage {
    private MessageType type;
    private String content;
    private String sender;

    public enum MessageType {
        CHAT,
        JOIN,
        LEAVE
    }

    public MessageType getType() {
        return type;
    }

    public void setType(MessageType type) {
        this.type = type;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getSender() {
        return sender;
    }

    public void setSender(String sender) {
        this.sender = sender;
    }
}

實(shí)體中，有三個(gè)字段：

  • type:消息類(lèi)型
  • content：消息內(nèi)容
  • sender：發(fā)送者

類(lèi)型有三種：

  • CHAT: 消息
  • JOIN：加入
  • LEAVE：離開(kāi)

創(chuàng)建Controller來(lái)接收和發(fā)送消息

創(chuàng)建controller文件夾，在controller文件夾添加類(lèi)ChatController

import com.example.websocketdemo.model.ChatMessage;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.Payload;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessageHeaderAccessor;
import org.springframework.stereotype.Controller;

@Controller
public class ChatController {

    @MessageMapping("/chat.sendMessage")
    @SendTo("/topic/public")
    public ChatMessage sendMessage(@Payload ChatMessage chatMessage) {
        return chatMessage;
    }

    @MessageMapping("/chat.addUser")
    @SendTo("/topic/public")
    public ChatMessage addUser(@Payload ChatMessage chatMessage, 
                               SimpMessageHeaderAccessor headerAccessor) {
        // Add username in web socket session
        headerAccessor.getSessionAttributes().put("username", chatMessage.getSender());
        return chatMessage;
    }
}

代碼解釋?zhuān)?/strong>

我們?cè)趙ebsocket配置中，從目的地以/app開(kāi)頭的客戶端發(fā)送的所有消息都將路由到這些使用@MessageMapping注釋的消息處理方法。

例如，具有目標(biāo)/app/chat.sendMessage的消息將路由到sendMessage（）方法，并且具有目標(biāo)/app/chat.addUser的消息將路由到addUser（）方法

添加WebSocket事件監(jiān)聽(tīng)

完成了上述代碼后，我們還需要對(duì)socket的連接和斷連事件進(jìn)行監(jiān)聽(tīng)，這樣我們才能廣播用戶進(jìn)來(lái)和出去等操作。

創(chuàng)建listener文件夾，新建WebSocketEventListener類(lèi)

import com.example.websocketdemo.model.ChatMessage;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.event.EventListener;
import org.springframework.messaging.simp.SimpMessageSendingOperations;
import org.springframework.messaging.simp.stomp.StompHeaderAccessor;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.messaging.SessionConnectedEvent;
import org.springframework.web.socket.messaging.SessionDisconnectEvent;

@Component
public class WebSocketEventListener {

    private static final Logger logger = LoggerFactory.getLogger(WebSocketEventListener.class);

    @Autowired
    private SimpMessageSendingOperations messagingTemplate;

    @EventListener
    public void handleWebSocketConnectListener(SessionConnectedEvent event) {
        logger.info("Received a new web socket connection");
    }

    @EventListener
    public void handleWebSocketDisconnectListener(SessionDisconnectEvent event) {
        StompHeaderAccessor headerAccessor = StompHeaderAccessor.wrap(event.getMessage());

        String username = (String) headerAccessor.getSessionAttributes().get("username");
        if(username != null) {
            logger.info("User Disconnected : " + username);

            ChatMessage chatMessage = new ChatMessage();
            chatMessage.setType(ChatMessage.MessageType.LEAVE);
            chatMessage.setSender(username);

            messagingTemplate.convertAndSend("/topic/public", chatMessage);
        }
    }
}

代碼解釋?zhuān)?/strong>

我們已經(jīng)在ChatController中定義的addUser（）方法中廣播了用戶加入事件。因此，我們不需要在SessionConnected事件中執(zhí)行任何操作。

在SessionDisconnect事件中，編寫(xiě)代碼用來(lái)從websocket會(huì)話中提取用戶名，并向所有連接的客戶端廣播用戶離開(kāi)事件。

創(chuàng)建前端聊天室頁(yè)面

我們?cè)趕rc/main/resources文件下創(chuàng)建前端文件，結(jié)構(gòu)類(lèi)似這樣：

static
  └── css
       └── main.css
  └── js
       └── main.js
  └── index.html

1. HTML文件 index.html

HTML文件包含用于顯示聊天消息的用戶界面。 它包括sockjs和stomp 兩個(gè)js庫(kù)。

SockJS是一個(gè)WebSocket客戶端，它嘗試使用本機(jī)WebSockets，并為不支持WebSocket的舊瀏覽器提供支持。 STOMP JS是javascript的stomp客戶端。

筆者在文件里使用了國(guó)內(nèi)的CDN源

<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
      <title>Spring Boot WebSocket Chat Application</title>
      <link rel="stylesheet" href="/css/main.css" />
  </head>
  <body>
    <noscript>
      <h2>Sorry! Your browser doesn't support Javascript</h2>
    </noscript>

    <div id="username-page">
        <div class="username-page-container">
            <h1 class="title">Type your username</h1>
            <form id="usernameForm" name="usernameForm">
                <div class="form-group">
                    <input type="text" id="name" placeholder="Username" autocomplete="off" class="form-control" />
                </div>
                <div class="form-group">
                    <button type="submit" class="accent username-submit">Start Chatting</button>
                </div>
            </form>
        </div>
    </div>

    <div id="chat-page" class="hidden">
        <div class="chat-container">
            <div class="chat-header">
                <h2>Spring WebSocket Chat Demo</h2>
            </div>
            <div class="connecting">
                Connecting...
            </div>
            <ul id="messageArea">

            </ul>
            <form id="messageForm" name="messageForm">
                <div class="form-group">
                    <div class="input-group clearfix">
                        <input type="text" id="message" placeholder="Type a message..." autocomplete="off" class="form-control"/>
                        <button type="submit" class="primary">Send</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="/js/main.js"></script>
  </body>
</html>

2. JavaScript main.js

添加連接到websocket端點(diǎn)以及發(fā)送和接收消息所需的javascript。

'use strict';

var usernamePage = document.querySelector('#username-page');
var chatPage = document.querySelector('#chat-page');
var usernameForm = document.querySelector('#usernameForm');
var messageForm = document.querySelector('#messageForm');
var messageInput = document.querySelector('#message');
var messageArea = document.querySelector('#messageArea');
var connectingElement = document.querySelector('.connecting');

var stompClient = null;
var username = null;

var colors = [
    '#2196F3', '#32c787', '#00BCD4', '#ff5652',
    '#ffc107', '#ff85af', '#FF9800', '#39bbb0'
];

function connect(event) {
    username = document.querySelector('#name').value.trim();

    if(username) {
        usernamePage.classList.add('hidden');
        chatPage.classList.remove('hidden');

        var socket = new SockJS('/ws');
        stompClient = Stomp.over(socket);

        stompClient.connect({}, onConnected, onError);
    }
    event.preventDefault();
}


function onConnected() {
    // Subscribe to the Public Topic
    stompClient.subscribe('/topic/public', onMessageReceived);

    // Tell your username to the server
    stompClient.send("/app/chat.addUser",
        {},
        JSON.stringify({sender: username, type: 'JOIN'})
    )

    connectingElement.classList.add('hidden');
}


function onError(error) {
    connectingElement.textContent = 'Could not connect to WebSocket server. Please refresh this page to try again!';
    connectingElement.style.color = 'red';
}


function sendMessage(event) {
    var messageContent = messageInput.value.trim();
    if(messageContent && stompClient) {
        var chatMessage = {
            sender: username,
            content: messageInput.value,
            type: 'CHAT'
        };
        stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(chatMessage));
        messageInput.value = '';
    }
    event.preventDefault();
}


function onMessageReceived(payload) {
    var message = JSON.parse(payload.body);

    var messageElement = document.createElement('li');

    if(message.type === 'JOIN') {
        messageElement.classList.add('event-message');
        message.content = message.sender + ' joined!';
    } else if (message.type === 'LEAVE') {
        messageElement.classList.add('event-message');
        message.content = message.sender + ' left!';
    } else {
        messageElement.classList.add('chat-message');

        var avatarElement = document.createElement('i');
        var avatarText = document.createTextNode(message.sender[0]);
        avatarElement.appendChild(avatarText);
        avatarElement.style['background-color'] = getAvatarColor(message.sender);

        messageElement.appendChild(avatarElement);

        var usernameElement = document.createElement('span');
        var usernameText = document.createTextNode(message.sender);
        usernameElement.appendChild(usernameText);
        messageElement.appendChild(usernameElement);
    }

    var textElement = document.createElement('p');
    var messageText = document.createTextNode(message.content);
    textElement.appendChild(messageText);

    messageElement.appendChild(textElement);

    messageArea.appendChild(messageElement);
    messageArea.scrollTop = messageArea.scrollHeight;
}


function getAvatarColor(messageSender) {
    var hash = 0;
    for (var i = 0; i < messageSender.length; i++) {
        hash = 31 * hash + messageSender.charCodeAt(i);
    }
    var index = Math.abs(hash % colors.length);
    return colors[index];
}

usernameForm.addEventListener('submit', connect, true)
messageForm.addEventListener('submit', sendMessage, true)

代碼解釋?zhuān)?/strong>

connect（）函數(shù)使用SockJS和stomp客戶端連接到我們?cè)赟pring Boot中配置的/ws端點(diǎn)。

成功連接后，客戶端訂閱/topic/public，并通過(guò)向/app/chat.addUser目的地發(fā)送消息將該用戶的名稱告知服務(wù)器。

stompClient.subscribe()函數(shù)采用一種回調(diào)方法，只要消息到達(dá)訂閱主題，就會(huì)調(diào)用該方法。

其它的代碼用于在屏幕上顯示和格式化消息。

3. CSS main.css

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,body {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.58;
    color: #333;
    background-color: #f4f4f4;
    height: 100%;
}

body:before {
    height: 50%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #128ff2;
    content: "";
    z-index: 0;
}

.clearfix:after {
    display: block;
    content: "";
    clear: both;
}

.hidden {
    display: none;
}

.form-control {
    width: 100%;
    min-height: 38px;
    font-size: 15px;
    border: 1px solid #c8c8c8;
}

.form-group {
    margin-bottom: 15px;
}

input {
    padding-left: 10px;
    outline: none;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 20px;
    margin-bottom: 20px;
}

h1 {
    font-size: 1.7em;
}

a {
    color: #128ff2;
}

button {
    box-shadow: none;
    border: 1px solid transparent;
    font-size: 14px;
    outline: none;
    line-height: 100%;
    white-space: nowrap;
    vertical-align: middle;
    padding: 0.6rem 1rem;
    border-radius: 2px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    min-height: 38px;
}

button.default {
    background-color: #e8e8e8;
    color: #333;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
}

button.primary {
    background-color: #128ff2;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
    color: #fff;
}

button.accent {
    background-color: #ff4743;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
    color: #fff;
}

#username-page {
    text-align: center;
}

.username-page-container {
    background: #fff;
    box-shadow: 0 1px 11px rgba(0, 0, 0, 0.27);
    border-radius: 2px;
    width: 100%;
    max-width: 500px;
    display: inline-block;
    margin-top: 42px;
    vertical-align: middle;
    position: relative;
    padding: 35px 55px 35px;
    min-height: 250px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -160px;
}

.username-page-container .username-submit {
    margin-top: 10px;
}


#chat-page {
    position: relative;
    height: 100%;
}

.chat-container {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    box-shadow: 0 1px 11px rgba(0, 0, 0, 0.27);
    margin-top: 30px;
    height: calc(100% - 60px);
    max-height: 600px;
    position: relative;
}

#chat-page ul {
    list-style-type: none;
    background-color: #FFF;
    margin: 0;
    overflow: auto;
    overflow-y: scroll;
    padding: 0 20px 0px 20px;
    height: calc(100% - 150px);
}

#chat-page #messageForm {
    padding: 20px;
}

#chat-page ul li {
    line-height: 1.5rem;
    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid #f4f4f4;
}

#chat-page ul li p {
    margin: 0;
}

#chat-page .event-message {
    width: 100%;
    text-align: center;
    clear: both;
}

#chat-page .event-message p {
    color: #777;
    font-size: 14px;
    word-wrap: break-word;
}

#chat-page .chat-message {
    padding-left: 68px;
    position: relative;
}

#chat-page .chat-message i {
    position: absolute;
    width: 42px;
    height: 42px;
    overflow: hidden;
    left: 10px;
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    line-height: 42px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    font-style: normal;
    text-transform: uppercase;
}

#chat-page .chat-message span {
    color: #333;
    font-weight: 600;
}

#chat-page .chat-message p {
    color: #43464b;
}

#messageForm .input-group input {
    float: left;
    width: calc(100% - 85px);
}

#messageForm .input-group button {
    float: left;
    width: 80px;
    height: 38px;
    margin-left: 5px;
}

.chat-header {
    text-align: center;
    padding: 15px;
    border-bottom: 1px solid #ececec;
}

.chat-header h2 {
    margin: 0;
    font-weight: 500;
}

.connecting {
    padding-top: 5px;
    text-align: center;
    color: #777;
    position: absolute;
    top: 65px;
    width: 100%;
}


@media screen and (max-width: 730px) {

    .chat-container {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 10px;
    }
}

@media screen and (max-width: 480px) {
    .chat-container {
        height: calc(100% - 30px);
    }

    .username-page-container {
        width: auto;
        margin-left: 15px;
        margin-right: 15px;
        padding: 25px;
    }

    #chat-page ul {
        height: calc(100% - 120px);
    }

    #messageForm .input-group button {
        width: 65px;
    }

    #messageForm .input-group input {
        width: calc(100% - 70px);
    }

    .chat-header {
        padding: 10px;
    }

    .connecting {
        top: 60px;
    }

    .chat-header h2 {
        font-size: 1.1em;
    }
}

整個(gè)項(xiàng)目結(jié)構(gòu)如下：

image.png

啟動(dòng)

啟動(dòng)SpringBoot項(xiàng)目

效果入下：

image.png
image.png

補(bǔ)充：使用RabbitMQ代替內(nèi)存作為消息代理

添加依賴：

<!-- RabbitMQ Starter Dependency -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-amqp</artifactId>
</dependency>

<!-- Following additional dependency is required for Full Featured STOMP Broker Relay -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-reactor-netty</artifactId>
</dependency>

然后將WebSocketConfig類(lèi)中configureMessageBroker方法改為使用RabbitMq，完成！

public void configureMessageBroker(MessageBrokerRegistry registry) {
    registry.setApplicationDestinationPrefixes("/app");

    // Use this for enabling a Full featured broker like RabbitMQ
    registry.enableStompBrokerRelay("/topic")
            .setRelayHost("localhost")
            .setRelayPort(61613)
            .setClientLogin("guest")
            .setClientPasscode("guest");
}

如此一來(lái)，便可以通過(guò)RabbitMq進(jìn)行消息的訂閱。

最后編輯于 ：
?著作權(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)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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