React Native 中使用 WebSocket

[felix-cao]

为了从远程获取数据，React Native 提供了 fetch API, 同时还支持 WebSocket, 本文主要尝试在 React Native 中使用 WebSocket.

WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。

这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。

WebSocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。

Client 端

componentDidMount() {
    const socket: any = new WebSocket('ws://localhost:8000/socket.io/?EIO=4&transport=websocket');

    socket.onopen = () => {
      socket.send('send message from client')
    }

    socket.onmessage = (e: any) => {
      console.log('recieve a message: ', e.data);
    }

    socket.onerror = (e: any) => {
      console.log(e.message);
    }

    socket.onclose = (e: any) => {
      console.log(e.code, e.reason);
    }
}

Server 端

import * as ws from 'ws';

const PORT = 8000;
const wss = new ws.Server({port: PORT});
wss.on('connection', (res) => {
  console.log('Client connected!');
  res.on('message', message => {
    console.log('message from client: ', message);
  });

  res.send('hello from server');
})

Reference

• HTTP 协议