使用Spring Boot + WebSocket + UniApp实现即时通讯

简介

本篇博客将详细介绍如何使用Spring Boot、WebSocket和UniApp技术栈来实现一个跨平台的即时通讯聊天应用。我们将分为前端和后端两部分进行讲解，并提供详细的代码示例。

前端：UniApp

1. 创建UniApp项目

首先，我们需要使用HBuilderX创建一个UniApp项目。选择“Hello uni-app”模板作为基础结构。

2. 用户界面设计

在pages/index目录下，我们创建一个名为chat的页面，用于展示聊天界面。

<!-- pages/index/chat.vue -->
<template>
  <view class="container">
    <scroll-view class="messages" :style="{height: 'calc(100% - 60px)'}">
      <view v-for="(msg, index) in messages" :key="index" :class="msg.type">
        {{ msg.content }}
      </view>
    </scroll-view>
    <input v-model="inputMessage" @input="onInput" placeholder="输入消息..." />
    <button @click="sendMessage">发送</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputMessage: '',
    };
  },
  methods: {
    onInput() { /* ... */ },
    sendMessage() {
      const message = this.inputMessage;
      this.socket.send(JSON.stringify({ type: 'message', content: message }));
      this.inputMessage = '';
    },
    onSocketOpen() { /* ... */ },
    onSocketMessage(event) { /* ... */ },
    onSocketClose(event) { /* ... */ },
    onSocketError(event) { /* ... */ },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.messages {
  flex: 1;
  overflow-y: scroll;
}
</style>

3. 集成WebSocket客户端

在main.js中，我们初始化WebSocket客户端并与后端进行通信。

// main.js
import socket from './utils/socket';
Vue.prototype.$socket = socket;

// utils/socket.js
import io from 'socket.io-client';
const socket = io('http://localhost:8080');
export default socket;

后端：Spring Boot + WebSocket

1. 创建Spring Boot项目

使用Spring Initializr创建一个新项目，并添加spring-boot-starter-websocket依赖。

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

2. WebSocket配置

配置WebSocketConfig以启用WebSocket并定义端点。

// WebSocketConfig.java
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketEndpoints(WebSocketEndpointRegistry registry) {
        registry.addEndpoint("/chat").withSockJS();
    }

}

3. 消息处理器

定义ChatHandler来处理WebSocket事件。

// ChatHandler.java
@ServerEndpoint("/chat")
public class ChatHandler {

    private static Set<Session> onlineUsers = new ConcurrentHashMap<>();

    @OnOpen
    public void onOpen(Session session) {
        onlineUsers.add(session); // 用户上线时添加到在线列表
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        // 广播消息给所有在线用户
        for (Session userSession : onlineUsers) {
            userSession.getBasicRemote().sendText(message);
        }
    }

    @OnClose
    public void onClose(Session session) {
        onlineUsers.remove(session); // 用户下线时从在线列表移除
    }

    @OnError
    public void onError(Session session, Throwable error) { /* ... */ }
}

4. 消息广播逻辑

实现消息发送和接收的逻辑。

// MessageService.java
@Service
public class MessageService {

    private static Set<Session> onlineUsers = new ConcurrentHashMap<>();

    public void broadcastMessage(String message) {
        for (Session session : onlineUsers) {
            session.getBasicRemote().sendText(message);
        }
    }

    // 其他必要的方法...
}