在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