使用 React Native 和 Socket.io 构建聊天应用程序

在本文中，我们将学习如何使用 React Native 和 Socket.io 构建一个React Native 聊天应用。Socket.io 是一个广泛使用的 JavaScript 库，主要用于实时 Web 应用。它支持客户端（浏览器）和服务器之间基于事件的实时、双向通信。它基于 Node.js 和 JavaScript 客户端库构建。其最突出的特性是可靠性、自动重连、多群组聊天室支持以及连接中断检测。

因此，这些是我们从 socket.io 获得的功能，我们将把它们集成到我们的 React Native 应用程序中以创建聊天应用程序。

那么，伙计们，我们开始吧！！！

Nodejs 后端

首先，我们需要一个后端服务器来处理来自客户端的所有传入消息和请求。

这里，我们需要将 express 和 socket.io 添加到 Node 项目的 index.js 文件中。我们将使用 es5 方法导入所需的 express 和 socket.io 库。当然，您也可以使用 es6 编码格式导入。我们将把 express 方法初始化为一个常量 app，然后使用 app 变量创建 http 服务器。之后，我们将使用 socket.io 库监听服务器。服务器监听的端口设置为 3000。

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const io = require("socket.io").listen(server);
const port = 3000;

其次，我们需要使用 on 方法启动 socket.io 服务器。然后，我们需要 emit 函数来建立双向通信，如下面代码片段所示：

io.on("connection", socket => {
  console.log("a user connected :D");
  socket.on("chat message", msg => {
    console.log(msg);
    io.emit("chat message", msg);
  });
});

最后，我们将在端口 3000 上启动服务器，以便服务器可以监听该端口上的任何传入请求。

server.listen(port, () => console.log("server running on port:" + port));

您可以在Codesandbox中查看服务器端代码和 demo 的结果。这样我们的服务器设置就完成了。

React Native 部分

在此步骤中，我们假设已经设置好 React Native 项目并正在运行。现在，我们开始构建应用程序，并将服务器端集成到客户端聊天应用程序中。

这里首先需要导入socket.io客户端包，即从socket.io-client包导入io模块，如下面代码片段所示：

import io from "socket.io-client";

接下来，我们需要创建两个状态来处理写入消息的变化以及保存消息的数组。这两个状态分别是用于处理客户端输入的 chatMessage 和用于存储已提交或已接收消息的 chatMessages 数组。具体代码如下：

constructor(props) {
   super(props);
   this.state = {
      chatMessage: "",
      chatMessages: []
   };
}

现在，我们初始化与服务器的连接。

在这里，通过使用 io 模块的 on 方法，我们将通过连接发送或接收的新消息来改变数组状态，如下面的代码片段所示：

componentDidMount() {
   this.socket = io("http://127.0.0.1:3000");
    this.socket.on("chat message", msg => {
          this.setState({ chatMessages: [...this.state.chatMessages, msg]   
     });
  });
}

接下来，我们需要创建一个简单的表单，并使用 map 函数显示消息。我们将使用一个简单的 TextInput 元素供客户端输入消息，并在 onSubmitEditing 事件发生时触发 submitChatMessage 函数，如下面代码片段所示：

render() {
    const chatMessages = this.state.chatMessages.map(chatMessage => (
      <Text style={{borderWidth: 2, top: 500}}>{chatMessage}</Text>
    ));

    return (
      <View style={styles.container}>
        {chatMessages}
        <TextInput
          style={{height: 40, borderWidth: 2, top: 600}}
          autoCorrect={false}
          value={this.state.chatMessage}
          onSubmitEditing={() => this.submitChatMessage()}
          onChangeText={chatMessage => {
            this.setState({chatMessage});
          }}
        />
      </View>
  ` );
  }

创建 submitChatMessage 函数以使用 emit 方法将消息发送到服务器，如下面的代码片段所示：

submitChatMessage() {
    this.socket.emit('chat message', this.state.chatMessage);
    this.setState({chatMessage: ''});
  }

最后，我们将使用样式表组件向我们的聊天容器添加一些样式，如下面的代码片段所示：

const styles = StyleSheet.create({
  container: {
    height: 400,
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

现在，我们在设备模拟器上运行我们的项目或进行测试。正如我们所看到的，它按预期工作：

因此，这标志着我们使用 React Native 和 Socket.io 包的简单聊天应用程序成功完成。

结论

在本文中，我们学习了如何使用 Node 和 Express 创建并设置一个简单的 socket.io 服务器。然后，我们还学习了如何将客户端 React Native 聊天应用程序与服务器端集成。我们成功建立了双向通信。最后，我们成功地在设备模拟器中运行并测试了我们的聊天应用程序。

最初于 2019 年 8 月 19 日发布于https://kriss.io 。

披露

这篇文章包含附属链接；如果您通过本文提供的不同链接购买产品或服务，我可能会收到报酬。

文章来源：https://dev.to/kris/buiding-chat-app-with-react-native-and-socket-io-4p8l