Socket.IO добавляет соединение при обновлении браузера
Я добавляю Socket.IO в свое приложение NodeJS (я новичок, кстати), и когда я обновляю веб-страницу, нажимая F5 в Chrome, новый сокет создается в соответствии с моим журналом сервера:
user connected SWpG6Fv9mjmMoLZRAAAA
user disconnected SWpG6Fv9mjmMoLZRAAAA
user connected gvtxcnJR6sC4DW7CAAAB
user connected gvtxcnJR6sC4DW7CAAAB
user disconnected gvtxcnJR6sC4DW7CAAAB
user disconnected gvtxcnJR6sC4DW7CAAAB
user connected pWPjZbVV_-lnVL4RAAAC
user connected pWPjZbVV_-lnVL4RAAAC
user connected pWPjZbVV_-lnVL4RAAAC
user disconnected pWPjZbVV_-lnVL4RAAAC
user disconnected pWPjZbVV_-lnVL4RAAAC
user disconnected pWPjZbVV_-lnVL4RAAAC
user connected sP7lJaRrH6Hrevp7AAAD
user connected sP7lJaRrH6Hrevp7AAAD
user connected sP7lJaRrH6Hrevp7AAAD
user connected sP7lJaRrH6Hrevp7AAAD
user disconnected sP7lJaRrH6Hrevp7AAAD
user disconnected sP7lJaRrH6Hrevp7AAAD
user disconnected sP7lJaRrH6Hrevp7AAAD
user disconnected sP7lJaRrH6Hrevp7AAAD
user connected -86W-itTDwrsyeVGAAAE
user connected -86W-itTDwrsyeVGAAAE
user connected -86W-itTDwrsyeVGAAAE
user connected -86W-itTDwrsyeVGAAAE
user connected -86W-itTDwrsyeVGAAAE
Есть идеи, почему это происходит?
Вот мой код:
index.js:
"use strict";
const express = require('express');
const app = express();
const http = require('http').Server(app);
const socket = require('socket.io')(http);
const opn = require('opn');
const login = require('./scripts/login.js');
const main = require('./scripts/main.js')(socket);
const init = require('./scripts/init.js');
const config = require('./scripts/config.js');
app.use(express.static('public'));
app.set('view engine', 'ejs');
http.listen(3000, function () {
console.info('==> Servidor iniciado -- Puerto 3000');
});
opn('http://localhost:3000');
app.use('/', main);
main.js
"use strict";
const express = require('express');
const router = express.Router();
const main = function (socket) {
// Home page route.
router.get('/', function (req, res) {
socket.on('connection', function (socket) {
console.info('user connected ' + socket.id);
socket.on('disconnect', function () {
console.info('user disconnected ' + socket.id);
});
});
res.render('main', {
page_name: 'main'
});
});
return router;
};
module.exports = main;
index.html
<script src = "/socket.io/socket.io.js" charset = "utf-8"></script>
<script>
var socket = io();
socket.on('connect', function (data) {
console.info('connected');
});
</script>
Ответы 1
На самом деле вы не получаете несколько подключений, а скорее добавляете все больше и больше слушателей для события connection, поэтому в конечном итоге вы обрабатываете одно и то же событие несколько раз (что приводит к появлению нескольких подключений).
Когда вы помещаете прослушиватель событий socket.io connect в обработчик маршрута следующим образом:
// Home page route.
router.get('/', function (req, res) {
socket.on('connection', function (socket) {
console.info('user connected ' + socket.id);
socket.on('disconnect', function () {
console.info('user disconnected ' + socket.id);
});
});
res.render('main', {
page_name: 'main'
});
});
Затем, КАЖДЫЙ раз, когда происходит попадание в маршрут /, вы добавляете еще один дублирующий прослушиватель для события connection. Итак, когда происходит одно новое соединение socket.io, у вас есть несколько слушателей для него, и, таким образом, вы обрабатываете одно и то же соединение несколько раз (создавая запутанное ведение журнала).
Решение обычно состоит в том, чтобы переместить прослушиватели socket.io за пределы любого обработчика маршрута, чтобы они были установлены только один раз. Но если вы поместите их в обработчик маршрута по какой-либо другой причине, вам также придется решить эту другую проблему. В любом случае прослушиватель socket.io должен находиться вне любого обработчика маршрута, поэтому он устанавливается только один раз при запуске сервера.
Возможно так:
"use strict";
const router = require('express').Router();
module.exports = function(io) {
io.on('connection', function (socket) {
console.info('user connected ' + socket.id);
socket.on('disconnect', function () {
console.info('user disconnected ' + socket.id);
});
});
// Home page route.
router.get('/', function (req, res) {
res.render('main', {
page_name: 'main'
});
});
return router;
};
Обратите внимание, что у вас также были две переменные в одной области видимости с именем socket. Это плохая практика, поскольку она блокирует доступ к более высокой области видимости и обычно создает возможность для ошибок или путаницы при работе над кодом.
Ваш более высокий уровень, вероятно, следует назвать io, чтобы не путать с параметром socket для события connection, а io - это обычное соглашение при обращении к основному экземпляру сервера socket.io.
@ Chico3001 - Поскольку это язык, управляемый событиями, все происходит через обратный вызов в Javascript, поэтому вам нужно будет изучить их и освоиться с ними или, возможно, найти другой тип среды программирования. Это действительно суть того, как работает Javascript в node.js и в браузере. Примите это, изучите это, станьте одним с ним, а не сражайтесь с ним. В любом случае, рад, что проблема решена.
Я абсолютно ненавижу обратные вызовы JS и слушателей ... спасибо за вашу помощь