客户端通过 websocket 连接从后端服务器数据库表检索数据

我使用以下服务器代码从 postgres 数据库检索数据：

    const express = require('express')
    const app = express()
    const server = require('http').createServer(app);
    const pool = require("postgresql");
    const WebSocket = require('ws');
    
    const wss = new WebSocket.Server({ server:server });
    
const getTempData = async () => {
  try {
    const tempData = await pool.query("select country, temp from my_temp_table");
    return JSON.stringify(tempData.rows)
  } catch(err) {
      console.error(err.messasge);
  }
}

wss.on('connection', async (webSocketClient) => {
  console.log('A new client Connected!');   
  const tempDetails = await getTempData();
  
  webSocketClient.send(tempDetails);      
  webSocketClient.on('message', (message) => {
    console.log('received: %s', message);    
  });
});           
server.listen(3000, () => console.log(`Listening on port :3000`))

现在在客户端，我创建了以下到 localhost 3000 的 websocket 连接。

首次渲染以下客户端代码时，数据显示，我还获取所有控制台日志消息，即ws opened, getting data....最后控制台记录实际的data.

isPaused也设置为 false。

我面临的问题是，不确定问题是什么，当我更新国家/临时值时，我希望看到我的客户端页面更新国家/临时数据（无页面刷新）my_temp_table数据库表，但没有。

我期望的结果是，通过 websocket，只要服务器端的表更新，客户端就会更新tempData，通过下面的第二个 useEffect 挂钩。

我基本上希望当后端数据库表中的数据发生变化时，客户端通过 websocket 拉入并显示来自服务器的更改。

import React, { useState, useEffect, useRef } from 'react';

export default function Temperature() {

  const [isPaused, setPause] = useState(false);
  const [tempData, setTempData] = useState([]);
  const [name, setName] = useState(null);
  const ws = useRef(null);

  useEffect(() => {
    ws.current = new WebSocket("ws://localhost:3000");
    ws.current.onopen = () => {
      console.log("ws opened");
    }
    ws.current.onclose = () => console.log("ws closed");    

    return () => {
        ws.current.close();
    };
  }, []);

  useEffect(() => {
      if (!ws.current) return;

      ws.current.onmessage = e => {
          if (isPaused) return;
          console.log("getting temp data....");
          const data = JSON.parse(e.data);
          setTempData(data)          
          console.log("data: ",data);
      };
  }, [isPaused]);

  return (
    <div>
        <button onClick={() => setPause(!isPaused)}>
            {isPaused ? "Resume" : "Pause"}
        </button>

        { tempData? 
          tempData.map((data, i) => ( 
            <div>
              <span>{data.country}</span> 
              <span>{data.temp}</span> 
            </div>
          ))
          : null }
    </div>
  )
}

该代码仅执行一次，因为没有对 Web 套接字的重复调用send事件。创建 Web 套接字后，它会从数据库获取数据并将其发送，仅此而已。

您可能需要某种操作来多次触发此事件。例如，在您的代码中：

wss.on("connection", async webSocketClient => {
    console.log("A new client Connected!");

    setInterval(() => {
        const timeNow = Date.now();

        webSocketClient.send(
            JSON.stringify([
                { country: "country-a", temp: timeNow },
                { country: "country-b", temp: timeNow },
            ])
        );
    }, 1000);

    webSocketClient.on("message", message => {
        console.log("received: %s", message);
    });
});

我看到您正在使用一些包来从 PostgreSQL 数据库中进行池化。看一眼这另一个例子 https://node-postgres.com/api/pool.