javascript - 为现有的 REST API 配置 Websocket - NodeJS、ReactJS

Question

我正在尝试在我的 React APP 和 REST API 之间建立持续连接。后端是用 JAVA 编写的。每当在数据库中添加新数据时，都应该将更新的数据发送到我的 react APP。对于这个过程，我正在使用 websockets。我已经在客户端（React APP）和 websocket.js（NodeJS）之间创建了连接

websocket.js在 8000 端口运行

const webSocketsServerPort = 8000;
const webSocketServer = require('websocket').server;
const http = require('http');

const server = http.createServer();
server.listen(webSocketsServerPort);
console.log("Listening on Port 8000");

const wsServer = new webSocketServer({
    httpServer: server
})

const clients = {};

// This code generates unique userid for everyuser.
const getUniqueID = () => {
  const s4 = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
  return s4() + s4() + '-' + s4();
};

wsServer.on('request', function(request) {
  var userID = getUniqueID();
  console.log((new Date()) + ' Recieved a new connection from origin ' + request.origin + '.');
  
  const connection = request.accept(null, request.origin);
  clients[userID] = connection;
  console.log('connected - : ' + userID + ' in ' + Object.getOwnPropertyNames(clients))
});

我的反应组件

import { w3cwebsocket as W3CWebSocket } from "websocket";

const client = new W3CWebSocket('ws://127.0.0.1:8000');

componentDidMount() {
    client.onopen = () => {
        console.log('WebSocket Client Connected');
    };
}

我的 React APP 正在运行的是localhost:3000. websocket 连接已建立。

基本上我的数据列表 API 是我获取更新数据的地方，http//server.com/getDataList并且通过如下所示的 websocket 连接似乎不起作用

const client = new W3CWebSocket('ws://server.com/getDataList:8000');

我的 React APP 上也有.ngnix.config文件

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    location / {
        root   /share/nginx/html/;
        index  /share/nginx/html/index.html;
        try_files $uri /index.html;
    }
}

那么，当新数据使用 websockets 推送到数据库时，我如何通过现有的 REST API 获得我的 React APP 之间的持续连接以将更新的数据获取到我的 React APP，因为我只能在 localhost 上获得连接

标签： javascriptnode.jsreactjswebsocket