Question

在Heroku上部署后，Websocket服务器未连接：

我已经阅读了文档和heroku教程。

我能够在本地运行该应用程序，但是在heroku部署中遇到了问题。 UI部分正在运行，但似乎未连接到后端。 Procfile已更新。

需要将客户端连接URL更改为localhost：8989才能在本地工作。当我在部署之前在客户端中对URL进行硬编码时，控制台中的错误与当我不运行以npm start本地运行的websocket服务器时相同。

https://github.com/kbventures/chatTest 前端：

    import * as types from '../constants/ActionTypes';
    import { addUser, messageReceived, populateUsersList } from '../actions';

    const setupSocket = (dispatch, username) => {
      const socket = new WebSocket('wss://boiling-brook-76849.herokuapp.com');

      //const HOST = location.origin.replace(/^http/, 'ws');
      //const socket = new WebSocket(HOST);

      socket.onopen = () => {
        socket.send(
          JSON.stringify({
            type: types.ADD_USER,
            name: username
          })
        );
      };
      socket.onmessage = event => {
        const data = JSON.parse(event.data);
        switch (data.type) {
          case types.ADD_MESSAGE:
            dispatch(messageReceived(data.message, data.author));
            break;
          case types.ADD_USER:
            dispatch(addUser(data.name));
            break;
          case types.USERS_LIST:
            dispatch(populateUsersList(data.users));
            break;
          default:
            break;
        }
      };
      return socket;
    };

export default setupSocket;

后端：

const WebSocket = require('ws');

const port = process.env.PORT || 8989;

const wss = new WebSocket.Server({ port });

const users = [];

const broadcast = (data, ws) => {
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN && client !== ws) {
      client.send(JSON.stringify(data));
    }
  });
};

wss.on('connection', ws => {
  let index;
  ws.on('message', message => {
    const data = JSON.parse(message);
    switch (data.type) {
      case 'ADD_USER': {
        index = users.length;
        users.push({ name: data.name, id: index + 1 });
        ws.send(
          JSON.stringify({
            type: 'USERS_LIST',
            users
          })
        );
        broadcast(
          {
            type: 'USERS_LIST',
            users
          },
          ws
        );
        break;
      }
      case 'ADD_MESSAGE':
        broadcast(
          {
            type: 'ADD_MESSAGE',
            message: data.message,
            author: data.author
          },
          ws
        );
        break;
      default:
        break;
    }
  });

  ws.on('close', () => {
    users.splice(index, 1);
    broadcast(
      {
        type: 'USERS_LIST',
        users
      },
      ws
    );
  });
});

将在本地填充，更新用户列表，并且浏览器控制台中不会出现错误。

为了重现错误，请访问：

https://boiling-brook-76849.herokuapp.com/

键入一条消息，然后检查控制台是否存在以下错误：

index.js：2178在handleNewMessage处未在handleNewMessage处捕获在每个在
错误：无法在“ WebSocket”上执行“发送”：仍处于CONNECTING状态

...

index.js：5与'wss：//boiling-brook-76849.herokuapp.com/'的WebSocket连接失败：WebSocket握手过程中出错：意外的响应代码：503

Heroku Node.js WebSocket服务器聊天部署

0 个答案: