React 和 Websocket 向服务器发送消息

Question

因此，我遇到了显示从资源服务器中提取的列表的单个组件的问题。 然后它使用 Stompjs 建立一个 websocket 并发送消息。 当我加载客户端时，开发控制台显示它尝试调用 onConnected 方法两次的日志，因为我的日志显示从组件的单个加载发送的两条 newUser 消息。

当我尝试调用 submitBid() 方法时，它会抛出一个类型错误，说明

“TypeError：无法在 submitBid (AuctionList.js:76:1) 处读取未定义的属性（读取‘发送’）”

我不确定为什么当它在第 36 行的 function 中定义并运行良好时，它会在该行上未定义，该行在失败的方法之前运行。 我已经坚持了好几天了，所以希望有人能告诉我我的代码有什么问题......这是组件代码......

import React from 'react'
import Stomp from 'stompjs';
import SockJS from 'sockjs-client';
import {useState, useEffect } from 'react';

function AuctionList({user, authCredentials, token}) {

 
 const [auctionItems, setAuctionItems] = useState([]);

 const [userData, setUserData] = useState({
                                            email: user.email,
                                            name: user.name,
                                            message: ''
                                          });

  const [bid, setBid] = useState(0.00);

  let stompClient;
  let socket;



const connect = async () => {
      socket = new SockJS('http://localhost:8080/ws')
      stompClient = Stomp.over(socket)
      stompClient.connect({}, onConnected, onError)
}



const onConnected = async () => {

  stompClient.subscribe('/topic/bids', onMessageReceived)

  stompClient.send("/app/socket.newUser",
      {},
      JSON.stringify({
          sender: user.name,
          type: 'NEW_USER',
          time: Date.now()
      })
  )
}



 
const onError = async (err) => {
  console.log(err);
 
}


const handleChange = async (e) =>{ 
  setBid(e.target.value);
}


const submitBid =  async (item) => { 
  

  let newMessage = {
                type: "BID",
                newBid: {
                        itemId: item.id,
                        email: user.email,
                        bidPrice: bid,
                        bidTime: new Date().getTime()
                       },
                sender: userData.email,
                time: new Date().getTime()
      };

            try { 
              stompClient.send("/socket.send", {}, JSON.stringify(newMessage));
            } catch(err){ 
              console.log(err); }
}


const onMessageReceived = async (payload)=>{
  console.log("onMessageReceived")
  console.log(payload)
}



const getAuctionList = async () => {

    const url = "http://localhost:8080/auctionlist";
  
    const init = {
      method: "GET",
        headers: {
            'Content-type': 'application/json',
            'Authorization': `Bearer ${token}`, // notice the Bearer before your token
        },
    };

    fetch(url, init)
    .then(response => response.json())
    .then(response => {setAuctionItems(response)})
};


useEffect( () => {
  getAuctionList();
  connect();
}, []);


return (
    <ul>  
        {auctionItems.map( item =>  {
          return(                <div key={item.id} className = "auctionItemComponent">
                <h3>{item.name}</h3>
                <span>{item.desc}</span>
                <span>Current Bid: ${item.itemStartingPrice}</span>
                <span>Minimum Bid: {item.itemMinBid}</span>
                <span>Time left</span>
        
                <input type="number" id="bidInput_" name="bidInput" onChange={handleChange} ></input>
                <button type='submit' onClick={submitBid}>Submit bid</button>
              </div>)

        })}
    </ul> 
  )
}



export default AuctionList

我也意识到我有一堆没有任何等待的异步函数。 我尝试将它们添加进去，但没有任何变化。

Answer 1

这里的问题不stompjs ，而在于范围。 您在 React Component 中有 stompClient ，但submitBid的不同。 你可以用不同的方式来做。

1. 将 stompjs 置于全局阶段，如下所示： https://playcode.io/972045

2. 您可以使用useRef让客户端位于 React 组件中，并让 React 跟踪任何修改。

我个人认为像“连接”这样的东西应该远离 React 组件内部。 您应该将连接配置放在不同的文件中，并将实例导入 JSX 文件。