当前位置：首页 > article >正文

从零开始：构建一个简单的聊天应用使用 WebSocket 和 React Native

article 2025/3/2 2:13:48

聊天应用已经成为现代移动应用中不可或缺的一部分。实时通信的需求正在快速增长，无论是社交应用、客户支持还是团队协作，实时聊天都是至关重要的功能。在这篇博客中，我们将从零开始，使用 React Native 和 WebSocket 构建一个简单的实时聊天应用。你将学会如何使用 WebSocket 在客户端和服务器之间建立双向实时通信，并如何使用 React Native 构建跨平台的移动应用。

先决条件

在开始之前，确保你已经安装了以下工具：

Node.js：用于运行服务器和管理依赖。
React Native 环境：包括 Node.js、React Native CLI 和 Android/iOS 开发环境。
WebSocket 服务：在这个项目中，我们将使用 ws 作为 WebSocket 服务器。

如果你还没有安装这些工具，可以参考 React Native 官方文档来设置开发环境。

项目结构

我们将分为两个部分来构建这个聊天应用：

后端：使用 Node.js 和 WebSocket 实现一个简单的 WebSocket 服务器。
前端：使用 React Native 构建一个聊天界面，允许用户发送和接收消息。

1. 后端：构建 WebSocket 服务器

首先，我们需要为聊天应用搭建一个 WebSocket 服务器。WebSocket 允许客户端和服务器进行双向通信，因此它非常适合实时聊天应用。

步骤 1：初始化 Node.js 项目

在一个新的目录中初始化一个 Node.js 项目：

mkdir websocket-chat-server
cd websocket-chat-server
npm init -y

步骤 2：安装依赖

安装 WebSocket 库 ws，它是一个简单的 WebSocket 服务器和客户端实现：

npm install ws

步骤 3：创建 WebSocket 服务器

在项目根目录下创建一个 server.js 文件，内容如下：

const WebSocket = require('ws');

// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  console.log('客户端连接成功！');

  // 当收到消息时，转发给所有连接的客户端
  ws.on('message', message => {
    console.log('收到消息：', message);
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  // 连接关闭时
  ws.on('close', () => {
    console.log('客户端断开连接');
  });

  // 发送欢迎消息给客户端
  ws.send('欢迎来到聊天室！');
});

console.log('WebSocket 服务器正在监听 8080 端口...');

收起

步骤 4：运行 WebSocket 服务器

在命令行中运行以下命令启动服务器：

node server.js

此时，WebSocket 服务器已经启动，监听端口 8080，等待客户端连接。

2. 前端：构建 React Native 聊天应用

接下来，我们将构建 React Native 应用，连接到 WebSocket 服务器，发送和接收消息。

步骤 1：初始化 React Native 项目

在另一个目录中，初始化一个新的 React Native 项目：

npx react-native init WebSocketChatApp
cd WebSocketChatApp

步骤 2：安装 WebSocket 依赖

React Native 自带了对 WebSocket 的支持，但是为了方便，我们可以安装 react-native-websocket 来管理连接。首先，安装依赖：

npm install react-native-websocket

步骤 3：创建聊天界面

编辑 App.js 文件，构建聊天界面并实现 WebSocket 客户端逻辑：

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
import WebSocket from 'react-native-websocket';

export default function App() {
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);
  const [ws, setWs] = useState(null);

  // 建立 WebSocket 连接
  useEffect(() => {
    const socket = new WebSocket('ws://localhost:8080'); // 连接到 WebSocket 服务器

    socket.onopen = () => {
      console.log('连接到 WebSocket 服务器');
    };

    socket.onmessage = (event) => {
      // 接收到消息后更新消息列表
      setMessages((prevMessages) => [
        ...prevMessages,
        { key: prevMessages.length.toString(), message: event.data },
      ]);
    };

    socket.onclose = () => {
      console.log('WebSocket 连接关闭');
    };

    setWs(socket);

    return () => {
      socket.close(); // 清理连接
    };
  }, []);

  const handleSendMessage = () => {
    if (ws && ws.readyState === WebSocket.OPEN && message.trim() !== '') {
      ws.send(message); // 发送消息到服务器
      setMessages((prevMessages) => [
        ...prevMessages,
        { key: prevMessages.length.toString(), message: `你: ${message}` },
      ]);
      setMessage(''); // 清空输入框
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>实时聊天</Text>
      <FlatList
        data={messages}
        renderItem={({ item }) => <Text style={styles.message}>{item.message}</Text>}
      />
      <TextInput
        style={styles.input}
        placeholder="请输入消息"
        value={message}
        onChangeText={setMessage}
      />
      <Button title="发送消息" onPress={handleSendMessage} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    justifyContent: 'space-between',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  message: {
    fontSize: 16,
    marginBottom: 8,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 8,
    paddingHorizontal: 8,
  },
});

收起