POST错误404localhost：3000||使用socket.io/nodemoon/react获取错误ERR_CONNECTION_REFUSEDlocalhost：5000

问题描述

我目前正在关注webDevSimplified的教程

youtube：https://www.youtube.com/watch?v=tBr-PybP_9c

github存储库：https://github.com/WebDevSimplified/Whatsapp-Clone

我已经无数次地将代码与存储库进行了比较，并且阅读了socket.io的文档，但无济于事。

已经有一些线程存在类似的问题，但是许多线程没有得到答案，或者只是设置完全不同。

我已经为项目使用了纱线包管理器，而不是教程中所示的npm，但是我怀疑这是罪魁祸首。我已经安装了所有必需的依赖项。

让我们从 server.js

开始

const io = require('socket.io')(5000) // I changed it to 3000 but just got a different Error(see title)

io.on('connection',socket => {
    const id = socket.handshake.query.id
    socket.join(id)

    socket.on('send-message',({ recipients,text }) => {
        recipients.forEach(recipient =>  {
            const newRecipients = recipients.filter(r => r !== recipient)
            newRecipients.push(id)
            socket.broadcast.to(recipient).emit('receive-message',{
                recipients: newRecipients,sender: id,text
            })
        })
    })
})

在此应用中，我们使用useContext为我们的组件提供了插座。 这是 socketProvider.js

import React,{ useContext,useEffect,useState } from "react";
import io from "socket.io-client";

const SocketContext = React.createContext();

export function useSocket() {
  return useContext(SocketContext);
}

export function SocketProvider({ id,children }) {
  const [socket,setSocket] = useState();
  //console.log(socket)

  useEffect(() => {
    const newSocket = io("http://localhost:5000",{ query: { id } });// I changed the host here as well to 3000 but I either get a POST or a GET error respectively
    setSocket(newSocket);

    return () => newSocket.close();
  },[id]);

  return (
    <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>
  );
}

然后将其嵌套在另一个contextProvider中，又称为 Conversationsprovider.js

import React,useState,useCallback } from "react";
import useLocalStorage from "../hooks/useLocalStorage";
import { useContacts } from "./ContactsProvider";
import { useSocket } from "./SocketProvider";

const ConversationsContext = React.createContext();

export function useConversations() {
  return useContext(ConversationsContext);
}

export function Conversationsprovider({ id,children }) {
  const [conversations,setConversations] = useLocalStorage("conversations",[]);
  const [selectedConversationIndex,setSelectedConversationIndex] = useState(0);
  const { contacts } = useContacts();
  const socket = useSocket();

  function createConversation(recipients) {
    setConversations((prevConversations) => {
      return [...prevConversations,{ recipients,messages: [] }];
    });
  }

  const addMessagetoConversation = useCallback(({ recipients,text,sender }) => {
    setConversations((prevConversations) => {
      let madeChange = false;
      const newMessage = { sender,text };
      const newConversations = prevConversations.map((conversation) => {
        if (arrayEquality(conversation.recipients,recipients)) {
          madeChange = true;
          return {
            ...conversation,messages: [...conversation.messages,newMessage],};
        }
      
        return conversation;
      });

      if (madeChange) {
        return newConversations;
      } else {
        return [...prevConversations,messages: [newMessage] }];
      }
    });
  },[setConversations])

  useEffect(() => {
    if(socket == null) return
    
    socket.on('receive-message',addMessagetoConversation)

    return () => socket.off('receive-message')
  },[socket,addMessagetoConversation])

  function sendMessage(recipients,text) {

    socket.emit('send-message',text })
    addMessagetoConversation({ recipients,sender: id });
  }

  const formattedConversations = conversations.map((conversation,index) => {
    const recipients = conversation.recipients.map((recipient) => {
      const contact = contacts.find((contact) => {
        return contact.id === recipient;
      });
      const name = (contact && contact.name) || recipient;
      return { id: recipient,name };
    });

    const messages = conversation.messages.map(message => {
      const contact = contacts.find((contact) => {
        return contact.id === message.sender;
      })
      const name = (contact && contact.name) || message.sender;
      const fromMe = id === message.sender
      return { ...message,senderName: name,fromMe }
    })

    const selected = index === selectedConversationIndex;
    return { ...conversation,messages,recipients,selected };
  
  });

  const value = {
    conversations: formattedConversations,selectedConversation: formattedConversations[selectedConversationIndex],sendMessage,selectConversationIndex: setSelectedConversationIndex,createConversation,};

  return (
    <ConversationsContext.Provider value={value}>
      {children}
    </ConversationsContext.Provider>
  );
}

function arrayEquality(a,b) {
  if (a.length !== b.length) return false;

  a.sort();
  b.sort();

  return a.every((element,index) => {
    return element === b[index];
  });
}

我以前没有使用过websocket.API / socket.io的经验，并且还没有完全了解工作流程。我希望有人可能会看到我到目前为止没有发现/发现的错误。

我认为此反应设置与常规设置略有不同，因为我无法在线找到任何类似的设置，这可能有助于解决我的问题。

如果您认为这很重要，请检查上面的主存储库。我的本地文件夹结构和代码相同。

我将尝试另一个堆栈，看看是否可以使其与node.js一起运行，或者同时从文档中尝试示例。

解决方法

我找到了错误的原因。我只是错过了在服务器目录中运行nodemon脚本。