关于SpringBoot整合Websocket实现简易对话聊天窗

浅浅的花香味﹌ 2023-10-09 20:57 32阅读 0赞

![在这里插入图片描述][4f90b091499e47ccbc4c64a5d757538a.png]

### 前言 ###

官网链接：[Websocket ][Websocket]  
Websocket 是什么？它可以将两个独立的浏览器窗口作为通信的两端。 这种形式的通信与传统的 HTTP、TCP 所不同。传统的 HTTP 请求—响应协议是无法实现实时通信的，也就是说，只能由客户端向服务端发送请求，服务端做出响应，再将响应返回给客户端。因此在 Web 开发中，如果需要实时更新消息，只能通过不断刷新页面或者轮询的方式实现，这样会导致大量的用户请求，极大的浪费服务器资源，同时也会增加网络负荷。  
![在这里插入图片描述][c650fe39961c46179990507f2a1235b2.png_pic_center]

### 准备工作 ###

*  vue
 *  springboot
 *  IntelliJ IDEA

### 后端实现 ###

#### 1.创建SpringBoot项目 ####

使用 IntelliJ IDEA 创建一个 SpringBoot 项目，修改 `pom.xml` 文件，加入 WebSocket 依赖。

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

创建一个 `WebSocketConfig` 类并且与 `@Configuration` 注解一起使用。通过 `WebSocketHandlerRegistry` 对象的 `addHandler()`方法注册一个处理器 `ChatHandler`，`setAllowedOrigins("*")` 允许任何域名访问。

@Configuration
    @EnableWebSocket
    public class WebSocketConfig implements WebSocketConfigurer {
        
        @Override
        public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        
            registry.addHandler(new ChatHandler(), "/chat").setAllowedOrigins("*");
        }
    }

#### 2.创建Websocket处理器 ####

对于每个 WebSocket 连接，都会创建一个实例来处理协议。可以使用 `@Component` 注解简单的将处理器注册为 Spring 的 Bean，然后在 WebSocket 配置中通过 `new ChatHandler()` 方式注入。  
我们在 `ChatHandler` 里面监听网络事件，当客户端向唯一的WebSocket端点发送消息时，通过`Session.sendMessage(TextMessage message)`发送消息，在服务器端接收消息时，使用 `TextMessage.getPayload()` 方法获取消息体内容，使用`Session.getBasicRemote().sendText()` 将消息发送到客户端。

@Component
    public class ChatHandler extends TextWebSocketHandler {
        
        private static final Map<String, WebSocketSession> sessions = new ConcurrentHashMap<>();
    
        //连接成功调用
        @Override
        public void afterConnectionEstablished(WebSocketSession session) {
        
            sessions.put(session.getId(), session);
        }
    
        //接收消息处理消息
        @Override
        protected void handleTextMessage(WebSocketSession session, TextMessage message)
                throws Exception {
        
            for (WebSocketSession s : sessions.values()) {
        
                s.sendMessage(new TextMessage("用户 : "+message.getPayload()));
            }
        }
    
        //连接关闭调用
        @Override
        public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
        
            sessions.remove(session.getId());
        }
    }

### 前端实现 ###

#### 1.初始化 vue 项目 ####

在 vue 项目中，我们装 `vue-websocket` 包并且 `import`。

import VueWebSocket from 'vue-websocket'

Vue.use(VueWebSocket, 'ws://localhost:8080/chat', {
        
      reconnection: true,
      reconnectionAttempts: 5
    })

#### 2.实现页面代码 ####

接下来，我们创建一个简单的聊天聊天窗口，包含输入框，发送按钮以及一个消息列表。在用户键入消息后，可以通过 `.send()` 方法将消息发送到Springboot服务器端。

<template>
        <div class="chat-container">
            <div class="chat-msgs">
                <div v-for="msg in msgs" :key="msg.id" class="chat-msg">
                    <span>{
       { msg.user }}</span>
                    <span>{
       { msg.message }}</span>
                </div>
            </div>
            <div class="chat-input">
                <input v-model="message" type="text" placeholder="输入你的消息" />
                <button @click="sendMsg">发送</button>
            </div>
        </div>
    </template>
    
    <script>
    export default {
          
        data() {
          
            return {
          
                message: '',
                msgs: []
            }
        },
        methods: {
          
            sendMsg() {
          
                this.$socket.send(this.message)
                this.msgs.push({
          
                    id: this.msgs.length,
                    user: '我',
                    message: this.message
                })
                this.message = ''
            }
        },
        sockets: {
          
            message(data) {
          
                this.msgs.push({
          
                    id: this.msgs.length,
                    user: '服务端',
                    message: data
                })
            }
        }
    }
    </script>
    
    <style>
    .chat-container {
          
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .chat-msgs {
          
        flex: 1;
        overflow-y: auto;
        margin-bottom: 10px;
    }
    
    .chat-msg {
          
        background-color: #F6F6F6;
        padding: 5px;
        border-radius: 10px;
        margin: 5px;
    }
    
    .chat-input {
          
        display: flex;
        justify-content: center;
    }
    
    .chat-input input {
          
        flex: 1;
        margin-right: 10px;
        padding: 5px;
    }
    
    .chat-input button {
          
        padding: 5px 15px;
        border: none;
        background-color: #4169E1;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
    }
    </style>

### 启动应用程序 ###

启动 SpringBoot 应用程序，然后通过 npm run serve 启动客户端应用程序。打开两个标签页，在页面中输入消息并发送，可以看到两个窗口中的消息相互更新，实现了简单的实时通信。

### 总结 ###

通过本次实战，我们学习了如何在 SpringBoot 应用程序中使用 WebSocket 实现简单的实时通信，同时将 vue 与 WebSocket 搭配使用，从而完成一个实时聊天窗口。

实时通讯在现代化 Web 应用程序中越来越重要，WebSocket 技术已经成为了主流解决方案。相信通过本文的学习，您已经对 WebSocket 有所了解，并能够将其应用到 Web 开发中。

有需要的小伙伴可以私信我功能模块的代码哦

[4f90b091499e47ccbc4c64a5d757538a.png]: https://img-blog.csdnimg.cn/4f90b091499e47ccbc4c64a5d757538a.png
[Websocket]: https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
[c650fe39961c46179990507f2a1235b2.png_pic_center]: https://img-blog.csdnimg.cn/c650fe39961c46179990507f2a1235b2.png#pic_center