Использовать сокет.ввод-вывод с помощью React

#javascript #reactjs #socket.io

Вопрос:

Как мне использовать сокет.ввод-вывод с помощью React? У меня есть этот код для моего клиента:

 import React, { Component } from "react"
import io from "socket.io-client"
import "./App.css"

const socket = io()
console.log(socket)

class App extends Component {
    render() {
        return (
            // ...
        )
    }
}

export default App

И для моего сервера:

 const express = require("express"),
    app = express(),
    http = require("http").Server(app),
    io = require("socket.io")(http)

io.on("connection", socket => {
    console.log("New connection")
})

http.listen(8000, () => {
    console.log("Started!")
})

Но я продолжаю получать эту ошибку:

 POST http://localhost:3000/socket.io/?EIO=3amp;transport=pollingamp;t=MdZyD8L 404 (Not Found)

Что я сделал не так? Спасибо.

PS: Для запуска приложения я делаю npm run start , а для сервера node server/server.js

Ответ №1:

на самом деле я не запускал код; но вы заметили, что порт в ошибке — 3000, а не 8000, который вы инициализировали на сервере для прослушивания?

чтение https://socket.io/docs/client-api /, в нем говорится, что по умолчанию используется расположение окна, зная react, вы, вероятно, работаете на порту 3000, который является тем же самым 3000 в ошибке

попробуйте установить порт при инициализации объекта сокета

 const socket = io("localhost:8000");

1. Также. убедитесь, что не вводите жесткий код в localhost: 8000 при его развертывании (если делаете это). У меня было это, и я развернул свое приложение на heroku.. Затем я обнаружил, что к моему серверу не было подключений… потому что я жестко запрограммировал его на localhost от клиента… если вы просто выполните io(), он «автоматически подключится к местоположению окна» socket.io/docs/client-api

Ответ №2:

Ниже приведен код для подключения через сокет, если вы хотите, чтобы после рендеринга страницы ваш сокет подключился, а затем запишите его в componentDidMount.

 import React, { Component } from "react"
import io from "socket.io-client"
import "./App.css";

class App extends Component {

componentDidMount(){
let socket = io.connect("http://localhost:8000");
   console.log(socket)
}
    render() {
        return (
            // ...
        )
    }
}

export default App

Например, вы можете перейти по ссылке:
https://medium.freecodecamp.org/how-to-create-a-realtime-app-using-socket-io-react-node-mongodb-a10c4a1ab676