SpringBoot，Node.js，Vue.js实现了实时聊天

2024-01-25 22:15:44

实时通信的力量：使用WebSockets在SpringBoot中实现前后端通信

前言

在现代Web应用程序中，实时通信已成为一种至关重要的功能，使应用程序能够与用户进行双向交互。WebSockets，由HTML5引入的协议，是实现此类通信的理想选择。本博客将深入探讨如何在SpringBoot中使用WebSockets，从而构建交互式且响应迅速的应用程序。

搭建Node.js服务器

为了处理WebSocket连接和消息传递，我们将搭建一个Node.js服务器。首先，我们需要安装必要的依赖项：

npm install socket.io express --save

然后，创建以下server.js文件：

// 导入必要的模块
const socketIO = require('socket.io');
const express = require('express');

// 创建Express应用
const app = express();

// 将Express应用与Socket.IO服务器关联
const io = socketIO(app);

// 监听Socket.IO连接事件
io.on('connection', (socket) => {
  console.log('A client connected');

  // 监听客户端发来的消息事件
  socket.on('message', (message) => {
    console.log(`Received message: ${message}`);

    // 将消息广播给所有已连接的客户端
    io.emit('message', message);
  });

  // 监听客户端断开连接事件
  socket.on('disconnect', () => {
    console.log('A client disconnected');
  });
});

// 启动服务器
app.listen(3000);

配置SpringBoot集成WebSocket

在SpringBoot应用程序中，我们需要启用WebSocket支持。在pom.xml文件中添加以下依赖项：

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

然后，在WebSocketConfig类中实现WebSocket配置：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

  @Override
  public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(new MyWebSocketHandler(), "/websocket").setAllowedOrigins("*");
  }
}

创建Vue.js前端应用程序

为了与WebSocket服务器进行交互，我们需要创建一个Vue.js前端应用程序。导入必要的模块并初始化Vue实例：

import Vue from 'vue';
import VueSocketIO from 'vue-socket.io';
import App from './App.vue';

Vue.use(VueSocketIO, 'http://localhost:3000');

new Vue({
  el: '#app',
  render: h => h(App),
});

App.vue组件

在App.vue组件中，添加以下代码：

<template>
  <div>
    <input type="text" v-model="message">
    <button @click="sendMessage">Send</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    sendMessage() {
      this.$socket.emit('message', this.message);
      this.message = '';
    },
  },
};
</script>