我有一个使用React和Socket.io/socket.io-client的网站。当我发布一条消息时,我希望该消息出现在我网站上的所有用户上。
我在本地测试了代码,一切正常。但是,当我将其上传到AWS上的Elastic beantalk时,我的Twitter流在一个小时或2个小时后停止工作。
在前端,我看到这样的错误: 无法加载资源:服务器的响应状态为400(错误请求)
和
与'ws://my.ip.address/socket.io/?EIO = 3&transport = websocket&sid = 6LwyF5lDoVH1mArYAJGJ'的WebSocket连接失败:WebSocket握手期间出错:意外的响应代码:400
在后端,我看不到任何错误,但是我看到很多Io连接和断开连接。
当我重新启动服务器时。它工作了大约一个小时,然后我又停止收到新消息了。
当前,我们有3个用户在使用此功能,所以我不完全理解为什么会有这么多连接/断开连接
我感觉自己的连接管理不佳,但是不确定如何解决。
这是我的package.json
{
"name": "xxxx",
"version": "0.1.0",
"private": true,
"main": "app.js",
"dependencies": {
"@emotion/core": "^10.0.0-beta.11",
"ajv": "^6.6.2",
"axios": "^0.18.0",
"eslint": "5.11.1",
"express": "^4.16.4",
"lodash.sortby": "^4.7.0",
"moment": "^2.22.2",
"npm-run-all": "^4.1.5",
"react": "^16.6.1",
"react-date-range": "^0.9.4",
"react-dom": "^16.6.1",
"react-google-login": "^3.2.1",
"react-helmet": "^5.2.0",
"react-redux": "^5.1.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts-ts": "^2.16.0",
"react-spinners": "^0.4.7",
"react-transition-group": "^1.2.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"socket.io": "^2.2.0",
"socket.io-client": "^2.2.0",
"twitter": "^1.7.1"
},
"proxy": "http://localhost:3001",
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
},
"devDependencies": {
"@types/jest": "^23.3.9",
"@types/node": "^10.12.3",
"@types/react": "^16.4.18",
"@types/react-dom": "^16.0.9",
"@types/react-redux": "^6.0.9",
"@types/redux": "^3.6.31",
"typescript": "^3.2.2"
}
}
这是我的app.js
const express = require('express');
const http = require('http');
const socketio = require('socket.io');
const path = require('path');
const bodyParser = require('body-parser');
const port = process.env.PORT || 3001;
const hostname = 'localhost'
const app = express();
require('dotenv').config();
app.all('/*', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
const server = http.createServer(app);
const io = socketio(server).listen(server);
app.use(bodyParser.json());
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
require('./server/routes/twitter.js')(app, io);
server.listen(port, hostname,() => {
console.log('server is up');
console.log('server listening on: ', hostname, ':', port);
});
const Twitter = require('twitter');
module.exports = (app, io) => {
var IO = io;
var twitter = new Twitter({
consumer_key: "xxx",
consumer_secret: "xxx",
access_token_key: "xxx",
access_token_secret: "xxx",
});
var socketConnection;
var twitterStream;
twitter.stream('statuses/filter', { follow: 'xxxx' }, (stream) => {
stream.on('data', (tweet) => {
console.log("new message found")
console.log(tweet.text)
sendMessage(tweet);
});
stream.on('error', (error) => {
console.log("twitter stream error")
console.log(error);
});
twitterStream = stream;
});
//Establishes socket connection.
io.on("connection", socket => {
console.log("connection io : " + socket.id)
socketConnection = socket;
socket.on("connection", () => console.log("Client connected " + socket.id));
socket.on("disconnect", () => console.log("Client disconnected : " + socket.id));
/**
* Emits data from stream.
* @param {String} msg
*/
const sendMessage = (msg) => {
console.log("in sendMessage")
if (msg.text.includes('RT')) {
return;
}
console.log("trying to send tweet")
IO.emit("tweets", msg);
console.log("msg broadcasted")
}
};
import * as React from 'react';
import request from 'src/libs/request';
import * as socketIOClient from "socket.io-client";
import { Tweet } from './../../store/interfaces/index';
import * as moment from 'moment';
interface TweetItem {
user: string,
message: string,
created: string
}
class SideBar extends React.Component {
state: Tweet = {
tweets : [],
isLoading: true,
wsTweets:[],
error: '' }
componentDidMount() {
this.openSocket();
}
public openSocket() {
const socket = socketIOClient('http://my.ip.address/');
socket.on('connect', () => {
console.log("Twitter Socket Connected");
socket.on("tweets", (data:any) => {
console.log(data);
var tweet = {created: parseInt(data.timestamp_ms,10),
message: data.text,
user: data.user.name
}
console.log(this.state.tweets)
console.log(tweet)
var newTweets = [tweet].concat(this.state.tweets);
console.log(newTweets)
// this.setState({ wsTweets: tweet })
this.setState({ tweets: newTweets })
});
});
socket.on('disconnect', () => {
socket.off("tweets")
socket.removeAllListeners();
console.log("Socket Disconnected");
this.openSocket();
console.log("reopening...")
});
socket.on('error', (exception:any) => {
console.log('TWITTER SOCKET ERROR');
console.log(exception)
})
}
render() {
}
}
export default SideBar;