Jestem początkującego i próbując zbudować prostą aplikację czatu z socket.io, ale po podłączeniu socket.io-client z zapleczem jest odtwarzanie wyżej wymienionego błędu. Nie mogę zrozumieć znaczenia powyższego błędu, więc pomóż mi debugować mój kod i zrozumieć znaczenie i przyczynę błędu.

Kod serwera

const express = require("express");
const socketIo = require("socket.io");
const http = require("http");
const router = require("./router");
const PORT = 8001;
const cors = require("cors");

const app = express();

const server = http.createServer(app);

//middlewares
app.use(router);
app.use(cors());

const io = socketIo(server);
// var so = io("https://yourDomain:3000", { transport: ["websocket"] });
//socket.io
io.on("connection", (socket) => {
  console.log("We have a new connection!!!");

  socket.on("join", ({ name, room }) => {
    console.log(name, room);
  });
  socket.on("disconnect", () => {
    console.log("User has left!!!");
  });
});

//listening on server
server.listen(8000, (err) => {
  if (err) {
    console.log(`Error: ${err}`);
    return;
  }
  console.log(`Server started on port: ${PORT}`);
});

package.json do serwera

{
  "name": "real-chat-application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "nodemon": "^2.0.7",
    "query-string": "^7.0.0",
    "react-emoji": "^0.5.0",
    "react-router": "^5.2.0",
    "react-scroll-to-bottom": "^4.1.0",
    "socket.io": "^4.0.1",
    "socket.io-client": "^4.0.1"
  }
}

My Czat Component Side-Side, w którym używam socket.io-client

import React, { useEffect, useState } from 'react';
import queryString from 'query-string';
import io from 'socket.io-client';

import './Chat.css';
let socket;
function Chat({ location }) {
  //state hook
  // eslint-disable-next-line
  const [name, setName] = useState('');
  const [room, setRoom] = useState('');
  const ENDPOINT = 'https://localhost:8001';
  useEffect(() => {
    const { name, room } = queryString.parse(location.search);
    // const data = queryString.parse(location.search);
    // console.log('location', location);
    // console.log('location.search: ', location.search);
    // console.log('data: ', data);
    setName(name);
    setRoom(room);
    socket = io(ENDPOINT);
    console.log(socket);
    socket.emit('join', { name, room });
    console.log(socket);
  }, [ENDPOINT, location.search]);
  return <div>Chat page</div>;
}

export default Chat;

package.json Dla strony klienta

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "query-string": "^7.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "socket.io-client": "^4.0.1",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
-1
dhruv singhal 15 kwiecień 2021, 06:52

1 odpowiedź

Najlepsza odpowiedź

Uruchamiasz serwer w porcie 8000, ale klient próbuje połączyć się z portem 8081.

Zmień tę linię,

const ENDPOINT = 'https://localhost:8001';

Do

const ENDPOINT = 'http://localhost:8000';

Za każdym razem, gdy napotkasz ERR_CONTECTECTECTE_REFUSE, oznacza to, że serwer nie jest dostępny lub do precyzyjnego serwera zaprzecza połączeniach na porcie z jakiegoś powodu.

Err_ssl_protocol_error może się zdarzyć z powodu "HTTPS". Zamiast tego użyj "http".

1
roarky 15 kwiecień 2021, 11:39