Сервер Websocket и npm запускаются на локальном хосте

Question

От скуки в настоящее время я пытаюсь создать простое чат-приложение на своем локальном хосте.

Чтобы начать все это, я начал с простого приложения реакции на основе create-реагирования-приложения. Там у меня есть следующий код для запуска связи WebSocket.

  // on localhost:3000
  componentDidMount = () => {
    this.ws = new WebSocket('ws://127.0.0.1:5000');

    this.ws.on('open', () => {
      this.ws.send(this.props.userName + ' has joined the Chat.');
    });

    this.ws.on('message', (message) => {
      const messages = this.state.messages;
      this.state.messages.push(message)
      this.setState({ messages: messages })
    });

    console.log('Component mounted.')
  }

Всякий раз, когда я пытаюсь выполнить это во время выполнения с npm start для связи с аналогичным сервером WebSocket, который выглядит следующим образом и запускается на той же машине с node server.js

// File: server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 5000 });

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        console.log('received: %s', message);
    });

    ws.send('something');
});

я получаю следующую проблему:

Access to fetch at 'http://127.0.0.1:5000/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Чтобы решить эту проблему, я уже пытался:

1. Access-Control- Расширение Allow-Origin для chrome без эффекта.
2. Для установки следующего прокси в пакете. json "proxy": "http://localhost:5000" - также без эффекта.
3. В качестве крайней меры я попытался запустить google-chrome с google chrome --disable-web-security --user-data-dir=/tmp - в этом случае я получаю следующее: GET http://127.0.0.1:5000/ net::ERR_ABORTED 426 (Upgrade Required) и с этого момента я потерялся.

Может кто-нибудь помочь мне в этом вопросе? Возможно ли это вообще или в моем мышлении есть недостаток?

Я не являюсь веб-разработчиком любого рода и обычно делаю C ++ ... Извините, если все это кажется глупым.

С уважением Jack

Answer 1

Убедитесь, что вы используете нативный объект WebSocket на клиенте, а не "браузерный".

Таким образом, импорт, такой как import WebSocket from "ws", не должен существовать в вашем приложении React. Оператор конструктора WebSocket останется без изменений.

Это связано с тем, что для ws требуется простой TCP-сокет и нет способа получить его в браузере через JavaScript (поэтому существует API WebSocket).

Следующая проблема может помочь вам с более подробной информацией: - https://github.com/websockets/ws/issues/1367

Answer 2

Я столкнулся с чем-то подобным, используя PHP на Amazon AWS. Но я думаю, что это ушло, и я ничего не сделал, и причина, по которой я думаю, что это произошло, была AWS сама по себе, включая заголовок Access-Control-Allow-Origin: *.

В любом случае:

Простым решением будет попытка изменить

ws://127.0.0.1:5000

на

ws://locahost:5000

В противном случае добавьте Access-Control-Allow-Origin: * на стороне сервера к заголовкам ответа