实战教程：构建实时聊天小程序

引言

实时聊天功能是现代移动应用的一个重要组成部分，在小程序中实现实时聊天功能可以为用户提供更好的交流体验。本教程将指导您如何使用 WebSocket 和消息推送技术构建一个实时聊天小程序。

技术准备

在开始之前，请确保您已经熟悉并了解以下技术：

1. 微信小程序开发基础知识
2. WebSocket 协议
3. 消息推送技术（如服务器推送、订阅/发布模式等）

准备工作

在开始之前，您需要准备以下内容：

1. 一个支持 WebSocket 的服务器，例如 Node.js + Express
2. 微信开发者工具
3. 编辑器（推荐使用 Visual Studio Code）

步骤一：搭建后端服务器

首先，您需要搭建一个支持 WebSocket 的后端服务器，以便小程序可以和服务器建立实时的双向通信。以下是一个使用 Node.js + Express 搭建的示例：

1. 创建一个新的目录，例如 chat-server。
2. 使用命令行工具进入 chat-server 目录，并执行 npm init -y 创建一个新的 package.json 文件。

$ cd chat-server
$ npm init -y

3. 安装 Express 和 ws（WebSocket 库）依赖。

$ npm install express ws

4. 在 chat-server 目录下创建一个新的文件 server.js，并将以下代码复制到 server.js 文件中：

const express = require('express');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    // 处理客户端发送的消息
    console.log('Received message:', message);
    
    // 将消息广播给所有连接的客户端
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
  
  ws.on('close', () => {
    // 处理客户端断开连接
    console.log('Client disconnected');
  });
});

server.listen(3000, () => {
  console.log('Server started on port 3000');
});

5. 运行 server.js 文件来启动服务器。

$ node server.js

现在您的后端服务器已经搭建完成，可以开始编写小程序的前端代码了。

步骤二：小程序开发

接下来，我们将开始编写小程序的前端代码。

1. 在微信开发者工具中创建一个新的小程序项目。
2. 打开小程序目录，找到 app.json 文件，并添加以下代码：

{
  "pages": [
    "pages/index/index"
  ]
}

3. 创建一个新的页面 index。在小程序目录下创建 pages 文件夹，并在 pages 文件夹下创建 index 文件夹。在 index 文件夹下创建 index.json、index.js 和 index.wxml 三个文件。

4. 在 index.json 文件中添加以下代码：

{
  "navigationBarTitleText": "实时聊天"
}

5. 在 index.wxml 文件中添加以下代码：

<view class="container">
  <scroll-view class="message-container" scroll-y="true">
    <block wx:for="{{messages}}" wx:key="{{index}}">
      <view class="message-item">{{item}}</view>
    </block>
  </scroll-view>
  <input class="input-box" bindinput="onInput" bindconfirm="onSend" value="{{inputValue}}" placeholder="请输入消息">
  <button class="send-button" bindtap="onSend">发送</button>
</view>

6. 在 index.wxss 文件中添加以下代码：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.message-container {
  flex: 1;
  padding: 10px;
  background-color: #f5f5f5;
}

.message-item {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}

.input-box {
  height: 50px;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.send-button {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #3c9fe6;
  color: #fff;
  font-size: 16px;
  border: none;
}

7. 在 index.js 文件中添加以下代码：

const app = getApp();
let socketTask;

Page({
  data: {
    inputValue: '',
    messages: []
  },
  
  onLoad() {
    // 连接 WebSocket 服务器
    socketTask = wx.connectSocket({
      url: 'wss://your-chat-server.com'
    });
    
    // 监听 WebSocket 连接打开事件
    socketTask.onOpen(() => {
      console.log('WebSocket connection opened');
    });
    
    // 监听 WebSocket 接收到服务器消息事件
    socketTask.onMessage((res) => {
      const message = res.data;
      console.log('Received message:', message);
      
      // 更新消息列表
      this.setData({
        messages: [...this.data.messages, message]
      });
    });
    
    // 监听 WebSocket 连接关闭事件
    socketTask.onClose(() => {
      console.log('WebSocket connection closed');
    });
    
    // 监听 WebSocket 连接出错事件
    socketTask.onError((error) => {
      console.error('WebSocket connection error:', error);
    });
  },
  
  onUnload() {
    // 关闭 WebSocket 连接
    socketTask.close();
  },
  
  onInput(event) {
    // 更新输入框内容
    this.setData({
      inputValue: event.detail.value
    });
  },
  
  onSend() {
    const message = this.data.inputValue;
    
    if (message.trim() === '') {
      return;
    }
    
    // 发送消息给 WebSocket 服务器
    socketTask.send({
      data: message
    });
    
    // 清空输入框内容
    this.setData({
      inputValue: ''
    });
  }
});

8. 运行小程序，您就可以在实时聊天页面中发送和接收消息了。

结论

通过本实战教程，您学习了如何使用 WebSocket 和消息推送技术构建一个实时聊天小程序。WebSocket 连接可以实现小程序和服务器之间的实时双向通信，消息推送技术可以保证用户可以实时收到最新的消息。希望本教程能对您有所帮助，谢谢阅读！

本文来自极简博客，作者：守望星辰，转载请注明原文链接：实战教程：构建实时聊天小程序