Socket.io не передает в комнату, используя пример redis и webpack - PullRequest
Новая
       23

Socket.io не передает в комнату, используя пример redis и webpack

0 голосов
/ 04 мая 2020

Я пытаюсь создать пример счетчика, подобный описанному в этом видео: - https://www.youtube.com/watch?v=jyFjFcUD4ps

Однако я обнаружил, что socket.io обновляется только windows после настройка соединения. Итак, я загружу страницу, и счетчик не будет обновляться на этой странице, но если у меня будет открыто другое окно с таким же значением ha sh, то эта страница обновится.

Вот мой клиентский пакет. json: 

  "name": "socketio-client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --config ./webpack.config.js --inline --hot",
    "build": "webpack"
  },
  "babel": {
    "presets": [
      "env"
    ]
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-preset-env": "^1.7.0",
    "socket.io-client": "^2.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "html-webpack-plugin": "^4.3.0",
    "webpack-dev-server": "^3.10.3"
  }
}

Вот мой индекс. js файл для клиентской стороны: - 

import io from 'socket.io-client';

const socket = io('http://localhost:9090');

socket.on('connect', function onConnect() {
    console.log('connected');
    if (window.location.hash) {
        const id = window.location.hash.substring(1);
        console.log('hash', id);
        socket.on('stats', function onStats(count) {
            console.log(count);
            document.getElementById('counter').innerHTML = count;
        });
        socket.emit('hello', { 'hashId': id });
    }
});

Вот мой индекс. html страница: - 

<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        <h1>Hit Counter is <span id="counter"></span></h1>
    </body>
</html>

Вот мой webpack.config. json: - 

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html'
        })
    ]
};

Вот мой серверный пакет. json: - 

  "name": "socketio-server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "redis": "^3.0.2",
    "socket.io": "^2.3.0"
  }
}

И вот мой сервер. js файл (ie мой исполняемый файл на стороне сервера) 

    const io = require('socket.io')(9090);
    const redis = require('redis');
    const client = redis.createClient();

    io.on('connection', function onConnection(socket) {
        console.log('connected');

        socket.on('hello', function hello(hashId) {
            socket.join(hashId.hashId);

            client.incr(hashId.hashId, onUpdate);
            function onUpdate(err, count) {
                console.log(err);
                console.log(count);
                socket.to(hashId.hashId).emit('stats', count);
            }
        });
    });

Я использую сервер узла. js on на стороне сервера и на стороне клиента я запускаю npm run start.

Затем я нажимаю следующий URL в другом браузере windows http://localhost: 8080 / # asdf

1 Ответ

0 голосов
/ 04 мая 2020

ОК, решил мою проблему. В приведенном ниже коде 

const io = require('socket.io')(9090);
const redis = require('redis');
const client = redis.createClient();

io.on('connection', function onConnection(socket) {
    console.log('connected');

    socket.on('hello', function hello(hashId) {
        socket.join(hashId.hashId);

        client.incr(hashId.hashId, onUpdate);
        function onUpdate(err, count) {
            console.log(err);
            console.log(count);
            socket.to(hashId.hashId).emit('stats', count);
        }
    });
});

socket.to (hashId.hashId) .emit ('stats', count); должно быть io.to. Это была ошибка в моей транскрипции, а не в оригинальном видео.

...