在React + NodeJS上通过浏览器进行WebSockets_在GAE标准上通过Websockets进行的GraphQL订阅没有响应_nodejs在浏览器上打印api响应 - 腾讯云开发者社区

在React + NodeJS上通过浏览器进行WebSockets的实现可以通过以下步骤完成：

首先，确保你已经安装了Node.js和React的开发环境。
在React项目中，使用npm或yarn安装WebSocket库，例如npm install websocket。
在React组件中，引入WebSocket库并创建一个WebSocket实例。例如：

import React, { useEffect } from 'react';
import WebSocket from 'websocket';

const MyComponent = () => {
  useEffect(() => {
    const socket = new WebSocket('ws://localhost:8080'); // 替换为你的WebSocket服务器地址

    // 连接成功时的回调函数
    socket.onopen = () => {
      console.log('WebSocket连接成功');
    };

    // 接收到消息时的回调函数
    socket.onmessage = (event) => {
      console.log('收到消息:', event.data);
    };

    // 连接关闭时的回调函数
    socket.onclose = () => {
      console.log('WebSocket连接关闭');
    };

    // 发送消息
    socket.send('Hello, WebSocket!');

    // 在组件卸载时关闭WebSocket连接
    return () => {
      socket.close();
    };
  }, []);

  return <div>WebSocket示例</div>;
};

export default MyComponent;

在Node.js服务器端，使用WebSocket库创建一个WebSocket服务器。例如：

const WebSocket = require('websocket').server;
const http = require('http');

const server = http.createServer((request, response) => {
  // 处理HTTP请求
});

server.listen(8080, () => {
  console.log('WebSocket服务器已启动');
});

const wsServer = new WebSocket({
  httpServer: server,
});

wsServer.on('request', (request) => {
  const connection = request.accept(null, request.origin);

  // 接收到消息时的回调函数
  connection.on('message', (message) => {
    console.log('收到消息:', message.utf8Data);
  });

  // 连接关闭时的回调函数
  connection.on('close', () => {
    console.log('WebSocket连接关闭');
  });

  // 发送消息
  connection.send('Hello, WebSocket!');
});

以上代码示例了如何在React和Node.js中使用WebSocket实现基本的消息收发功能。你可以根据实际需求进行扩展，例如添加消息处理逻辑、错误处理、身份验证等。

WebSockets是一种在Web浏览器和服务器之间进行全双工通信的协议，它可以实现实时的双向数据传输。它的优势包括：