如何使用SpringBoot和Netty实现一个WebSocket服务器，并配合Vue前端实现聊天功能？

曾经终败给现在 2024-03-16 12:07 37阅读 0赞

本文将详细介绍如何使用SpringBoot和Netty实现一个WebSocket服务器，并配合Vue前端实现聊天功能。

WebSocket是一种基于TCP的协议，它允许客户端和服务器之间进行双向通信，而不需要像HTTP那样进行请求和响应。Netty是一个Java网络编程框架，它提供了强大的异步事件驱动网络编程能力。SpringBoot是一个快速开发框架，它为开发者提供了丰富的自动化配置和依赖注入功能。

结合这三个工具，我们可以轻松地搭建一个高效、稳定的WebSocket服务器，并实现实时聊天功能。

### 准备工作 ###

在开始本文的实践部分之前，有一些准备工作需要做好：

1.  安装Node.js和Vue CLI
2.  熟悉JavaScript和Vue.js框架
3.  熟悉Java和SpringBoot框架

### 实践步骤 ###

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

首先，我们需要创建一个SpringBoot项目。可以使用Spring Initializr或者IDEA等工具来创建一个基础的SpringBoot项目。

#### 2. 添加Netty依赖 ####

在pom.xml文件中添加以下依赖：

<dependency>
        <groupId>io.netty</groupId>
        <artifactId>netty-all</artifactId>
        <version>4.1.53.Final</version>
    </dependency>

以上代码会添加Netty的依赖。

#### 3. 创建WebSocket服务器 ####

接下来，我们需要创建一个WebSocket服务器。创建一个名为`WebSocketServer`的类，并继承`ChannelInboundHandlerAdapter`类：

public class WebSocketServer extends ChannelInboundHandlerAdapter {
        
    }

在该类中，我们需要实现以下方法：

@Override
    public void channelRead(ChannelHandlerContext ctx, Object msg) throws Exception {
        
        // 处理消息
    }
    
    @Override
    public void channelActive(ChannelHandlerContext ctx) throws Exception {
        
        // 客户端连接建立时触发
    }
    
    @Override
    public void channelInactive(ChannelHandlerContext ctx) throws Exception {
        
        // 客户端连接断开时触发
    }

在`channelActive`方法中，我们可以获取客户端的连接，并保存到一个列表中：

@Override
    public void channelActive(ChannelHandlerContext ctx) throws Exception {
        
        Channel incoming = ctx.channel();
        System.out.println("Client: " + incoming.remoteAddress() + " 连接成功");
        ChatSession.add(incoming);
    }

在 `channelInactive` 方法中，从列表中移除断开连接的客户端:

@Override
    public void channelInactive(ChannelHandlerContext ctx) throws Exception {
        
        Channel incoming = ctx.channel();
        System.out.println("Client: " + incoming.remoteAddress() + " 断开连接");
        ChatSession.remove(incoming);
    }

在 `channelRead` 方法中处理消息，例如读取客户端发送过来的消息并进行广播：

@Override
    public void channelRead(ChannelHandlerContext ctx, Object msg) throws Exception {
        
        String message = (String) msg;
        System.out.println("接收到客户端消息: " + message);
        ChatSession.broadcast(message);
    }

`ChatSession`是一个帮助我们管理所有客户端连接的工具类。在该类中，我们可以定义一个静态列表 `channels` 来保存所有连接：

public class ChatSession {
        
        private static final List<Channel> channels = new CopyOnWriteArrayList<>();
    
        public static void add(Channel incoming) {
        
            channels.add(incoming);
        }
    
        public static void remove(Channel incoming) {
        
            channels.remove(incoming);
        }
    
        public static void broadcast(String message) {
        
            for (Channel channel : channels) {
        
                channel.writeAndFlush(message + "\n");
            }
        }
    }

以上代码会将接收到的消息进行广播，即向所有客户端发送同样的消息。

#### 4. 创建WebSocket处理器 ####

在上一步中，我们已经创建了一个WebSocket服务器，但是它并没有实现WebSocket的协议。为了实现WebSocket协议，我们需要使用Netty提供的`WebSocketServerProtocolHandler`类。

在`WebSocketServer`中添加以下代码：

@Override
    public void handlerAdded(ChannelHandlerContext ctx) throws Exception {
        
        ChannelPipeline pipeline = ctx.pipeline();
        pipeline.addLast(new HttpServerCodec());
        pipeline.addLast(new HttpObjectAggregator(65536));
        pipeline.addLast(new WebSocketServerProtocolHandler("/chat"));
        pipeline.addLast(new WebSocketFrameHandler());
    }

以上代码将向当前的ChannelPipeline添加了四个处理器：

*  `HttpServerCodec`：用于解析HTTP请求和响应。
 *  `HttpObjectAggregator`：用于将HTTP消息的多个部分聚合成一个完整的HTTP消息。
 *  `WebSocketServerProtocolHandler`：用于实现WebSocket协议。
 *  `WebSocketFrameHandler`：自定义的处理器，用于读取WebSocket帧并转发给所有客户端。

#### 5. 实现WebSocket帧处理器 ####

接下来，我们需要实现自定义的`WebSocketFrameHandler`处理器。该处理器会被添加到`WebSocketServer`的ChannelPipeline中，并负责读取WebSocket帧并将其转发给所有客户端。

public class WebSocketFrameHandler extends SimpleChannelInboundHandler<WebSocketFrame> {
        
        @Override
        protected void channelRead0(ChannelHandlerContext ctx, WebSocketFrame frame) throws Exception {
        
            if (frame instanceof TextWebSocketFrame) {
        
                String message = ((TextWebSocketFrame) frame).text();
                ChatSession.broadcast(message);
            } else {
        
                System.out.println("Unsupported frame type: " + frame.getClass().getName());
            }
        }
    }

以上代码会读取WebSocket帧，并将其转换为文本消息。如果是文本消息，就会调用`ChatSession.broadcast()`方法进行广播。

#### 6. 创建Vue前端 ####

在这个项目中，我们使用Vue.js框架创建一个简单的前端，它将连接到我们刚才创建的WebSocket服务器，并实现实时聊天功能。

首先，创建一个Vue项目：

vue create chat-client

在新创建的项目中，安装`vue-socket.io`和`socket.io-client`：

npm install vue-socket.io socket.io-client --save

修改`src/main.js`文件，添加以下代码：

import VueSocketIO from 'vue-socket.io'
    import SocketIO from 'socket.io-client'
    
    Vue.use(
      new VueSocketIO({
        
        debug: true,
        connection: SocketIO('http://localhost:8080/chat')
      })
    )

以上代码会创建一个Socket.IO客户端，并连接到`http://localhost:8080/chat`地址上。然后，我们可以使用`this.$socket`对象来发送和接收消息。

在组件中添加以下代码：

<template>
      <div>
        <input type="text" v-model="message" @keyup.enter="sendMessage" />
        <ul>
          <li v-for="(message, index) in messages" :key="index">{
       { message }}</li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          message: '',
          messages: []
        }
      },
      methods: {
        sendMessage() {
          this.$socket.emit('message', this.message)
          this.message = ''
        }
      },
      sockets: {
        message(message) {
          this.messages.push(message)
        }
      }
    }
    </script>

以上代码会渲染一个输入框和一个消息列表。当用户输入消息并按下回车键时，会调用`sendMessage()`方法发送消息。当接收到新消息时，会将其添加到消息列表中。

#### 7. 运行项目 ####

在本地运行后端服务器：

mvn spring-boot:run

在另一个终端窗口中运行前端应用：

npm run serve

现在，可以在浏览器中访问应用了：`http://localhost:8081`。在多个浏览器窗口或标签页中打开该地址，并尝试向其他客户端发送消息。

### 总结 ###

本文介绍了如何使用SpringBoot和Netty实现一个WebSocket服务器，并结合Vue前端实现了实时聊天功能。通过使用Netty的高效异步网络编程能力，我们可以轻松地构建一个高性能、高可靠性的WebSocket服务器。

在实践中，我们学习了如何使用Netty处理WebSocket协议，以及如何使用Vue.js框架创建一个简单的前端应用程序。我们还探讨了一些重要的主题，如如何管理客户端连接和广播消息。

这个项目是一个很好的开始点，你可以使用它作为模板来构建更复杂的WebSocket应用程序。