反应和 SignalR 问题答案

【问题标题】：react and SignalR issues反应和 SignalR 问题
【发布时间】：2018-10-10 03:34:20
【问题描述】：

我正在尝试使用 react 和 SignalR 构建聊天应用程序。我尝试编辑以下代码。

import * as React from 'react';
import { HubConnection, HubConnectionBuilder } from '@aspnet/signalr';
import * as signalR from '@aspnet/signalr';

class Chat extends React.Component {
    constructor() {
        super();

        this.state = {
            nick: '',
            message: '',
            messages: [],
            hubConnection: null,
        };

    }

    componentDidMount = () => {
        const nick = window.prompt('Your name:', 'John');

        //const hubConnection = new HubConnection('http://localhost:5000/chat'); 
        //Said deprecated

        const hubConnection = new HubConnectionBuilder().withUrl('http://localhost:5000/chat').build();

        this.setState({ hubConnection, nick }, () => {
            this.state.hubConnection
                .start()
                .then(() => console.log('Connection started!'))
                .catch(err => console.log('Error while establishing connection :('));

            this.state.hubConnection.on('sendToAll', (nick, receivedMessage) => {
                const text = `${nick}: ${receivedMessage}`;
                const messages = this.state.messages.concat([text]);
                this.setState({ messages });
            });
        });
    }


    sendMessage = () => {
        this.state.hubConnection
            .invoke('sendToAll', this.state.nick, this.state.message)
            .catch(err => console.error(err));

        this.setState({ message: '' });
    };

    render() {
        return (
            <div>
                <br />
                <input
                    type="text"
                    value={this.state.message}
                    onChange={e => this.setState({ message: e.target.value })}
                />

                <button onClick={this.sendMessage}>Send</button>

                <div>
                    {this.state.messages.map((message, index) => (
                        <span style={{ display: 'block' }} key={index}> {message} </span>
                    ))}
                </div>
            </div>
        );
    }

}

export default Chat;

我遇到的第一个问题是 const hubConnection = new HubConnection('http://localhost:5000/chat');似乎已被弃用。

以下是我收到的一些错误。有人可以让我知道一个新更新的帖子，我可以在其中参考构建它。没找到。

如果我不使用 SignalR，还有什么我可以参考 React 来实现聊天可见性

【问题讨论】：

什么？像socket.io ?? socket.io

标签： .net reactjs signalr

【解决方案1】：

您可以从 SignalR (v1.0.4) 导入特定模块：

import {
  JsonHubProtocol,
  HttpTransportType,
  HubConnectionBuilder,
  LogLevel
} from '@aspnet/signalr'; // version 1.0.4

这就是创建 Hub 的方法：

// create the connection instance
const connection = new HubConnectionBuilder()
  .withUrl(connectionHub, options)
  .withHubProtocol(protocol)
  .build();

我希望这会有所帮助。 Here is a reference you can take a look.

【讨论】：