TypeError：无效的事件目标-React，socket.io

问题描述

我正在尝试使用React和功能组件来构建聊天应用程序。在遵循使用基于类的组件的教程之前，我已经做过一个，在转换上下文时，似乎有些问题。

这是ChatContext.ts

export const ChatContext: React.Context<SocketService> = createContext(new SocketService())

SocketService.ts的摘录

import {Message,User} from '../types/types'
import { fromEvent,Observable } from 'rxjs';

export class SocketService {
    private socket: SocketIOClient.socket = {} as SocketIOClient.socket

    public init(): SocketService {
        this.socket = io('localhost:8080',{ 'forceNew': false })
        console.log('init')
        return this
    }

    public sendMessage(message: Message): void {
        this.socket.emit('message',message)
        console.log('sendMessage')
    }

    public onIncomingMessage(): Observable<Message> {
        console.log('onIncomingMessage')
        return fromEvent(this.socket,'message')
    }

    public signIn(user: User): void {
        console.log('signIn')
        this.socket.emit('signIn',user)
    }

    public onIncomingSignIn(): Observable<User>{
        console.log('onIncomingSignIn')
        return fromEvent(this.socket,'signIn')
    }



    public ontest(): Observable<string>{
        console.log('this is test')
        return fromEvent(this.socket,'test')
    }
}

index.ts

ReactDOM.render(
    <ChatContext.Provider value={chat}>
      <Provider store={store}>
      <App />

App.ts

const chatSocket = useContext(ChatContext)

  useEffect(()=>{
    chatSocket.init()
  },[])

然后我们来到我要处理登录的Landing.ts

import React,{ useState,useEffect,useContext } from 'react'
import {useSelector,usedispatch} from 'react-redux'
import {addUser,selectUsers} from './loginSlice'
import {ChatContext} from '../socket/ChatContext'
import { Observable } from 'rxjs'

const Landing = () => {
    const dispatch = usedispatch()
    const [username,setUsername] = useState('')
    // const users = useSelector(selectUsers)
    const chatSocket = useContext(ChatContext)
    const testObs = chatSocket.ontest()

    useEffect(()=>{
        chatSocket.ontest().subscribe() //This line gives me trouble
        
    },[])

    const handleSubmit = (event: React.FormEvent):void => {
        event.preventDefault()
        dispatch(addUser({username}))
        chatSocket.signIn({
            username,})
        setUsername('')
    }

    return(
        <div className='Landing'>
            <form onSubmit={(e)=>handleSubmit(e)}>
                <input type="text" value={username} onChange={(e)=>setUsername(e.target.value)}/>
                <button type='submit'>Join chat</button>
            </form>
        </div>
    )
}

export default Landing

由于我能够发出signIn并在服务器端获取它，因此init似乎可以正常工作。由于我不知道如何在客户端上创建订阅，因此我尚未设法成功地从服务器发出某些内容并在客户端进行处理。

让我知道您的想法，如果需要，我会发送任何多余的代码。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）