React SignalR HubConnection不会将数据发送到服务器

huangapple go评论65阅读模式
英文:

React SignalR HubConnection doesn't send data to server

问题

我正在尝试创建一个连接到 SignalR Hub 并在按钮点击时发送信息的应用程序,但出于某种原因它没有发送任何信息。

const bannerId = 1;

const App = () => {
  useEffect(() => {
    let newConnection = new HubConnectionBuilder()
      .withUrl('https://localhost:7116/bannerHub')
      .withAutomaticReconnect()
      .build();
    setConnection(newConnection);
  }, []);

  useEffect(() => {
    if (connection) {
      connection.start()
        .then(result => {
          console.log('Connected!');
        })
        .catch(e => console.log('Connection failed: ', e));
    }
  }, [connection]);

  const disableBanner = async (evt) => {
    await connection.send('DisableBanner', bannerId);
  }

  const enableBanner = async (evt) => {
    await connection.send('EnableBanner', bannerId);
  }

  return (
    <>
      <button onClick={async () => { await disableBanner(); }} className='btn btn-primary'>Disable banner</button>
      <button onClick={async () => { await enableBanner(); }} className='btn btn-primary'>Enable banner</button>
    </>
  );
}

我使用的包是 @microsoft/signalr,而 connection 对象是一个 HubConnection

有人知道我做错了什么吗?

谢谢,希望对其他遇到相同问题的人有所帮助!

英文:

I'm trying to do an application that connects to a SignalR hub and sends information when buttons are clicked but for some reason it's not sending anything.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
const bannerId = 1;

const App = () =&gt; {

useEffect(() =&gt; {
    let newConnection = new HubConnectionBuilder()
      .withUrl(&#39;https://localhost:7116/bannerHub&#39;)
      .withAutomaticReconnect()
      .build();
    setConnection(newConnection);
  }, []);

  useEffect(() =&gt; {
    if (connection) {
      connection.start()
        .then(result =&gt; {
          console.log(&#39;Connected!&#39;);

        })
        .catch(e =&gt; console.log(&#39;Connection failed: &#39;, e));
    }
  }, [connection]);
  
  const disableBanner = async (evt) =&gt; {
    await connection.send(&#39;DisableBanner&#39;, bannerId);
  }

  const enableBanner = async (evt) =&gt; {
    await connection.send(&#39;EnableBanner&#39;, bannerId);
  }

return(
&lt;&gt;
&lt;button onClick={async () =&gt; { await disableBanner(); }} className=&#39;btn btn-primary&#39;&gt;Disable banner&lt;/button&gt;
          &lt;button onClick={async () =&gt; { await enableBanner(); }} className=&#39;btn btn-primary&#39;&gt;Enable banner&lt;/button&gt;
&lt;/&gt;
);
}

<!-- end snippet -->

The package that I'm using is @microsoft/signalr and the connection object it's a HubConnection.

Does anyone knows what am I doing wrong?

Thank you and I hope this helps to others with the same problem!

答案1

得分: 0

I've solve it.

My problem was on the server side. SignalR methods where waiting for a string bannerId and I was sending them an int (or Number in JS). I thought that data binding was going to fix this but for some reason that doesn't work here.

The two possible solutions are:

  1. 将 SignalR 方法更改为接收 int bannerId 而不是 string bannerId
  2. 将 React 组件更改为发送 bannerId: string 而不是 bannerId: number

That was all. Thank you all for the comments.

英文:

I've solve it.

My problem was on the server side. SignalR methods where waiting for a string bannerId and I was sending them an int (or Number in JS). I thought that data binding was going to fix this but for some reason that doesn't works here.

The two possible solutions are:

  1. Change the SignalR methods to receive int bannerId instead of string bannerId
  2. Change react component to send a bannerId: string instead of bannerId: number.

That was all. Thank you all for the comments.

huangapple
  • 本文由 发表于 2023年5月17日 10:17:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/76268156.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定