Каков наилучший способ использования Socket.io с расширенным проектом Express.JS

gildniy спросил: 13 июня 2018 в 12:01 в: javascript

Поскольку я был новым для Express, мне было интересно, что может быть лучшим способом установить его с генератором и использовать Socket. io в нем.

Во многих учебниках они показывают способы установки socket.io, но в проекте с установленным вручную Express.

Может ли кто-нибудь предложить лучшее решение для этого ?!


1 ответ

gildniy ответил: 13 июня 2018 в 12:01

Вы можете создать новый проект NodeJS (Express 4.x), выполнив: npm install express --save и следуя инструкциям. После чего у вас будут разные папки внутри каталога Project:

  • bin: где находится www (основной файл конфигурации для проекта)
  • public: где хранятся / изображения, / javascritps и / stylesheets
  • маршруты: где хранимые файлы маршрутов (index.js и users.js в начале)
  • views: где мы находим файлы .html, которые будут использоваться (index.html, layout.html и error.html в начале)

, и у нас есть еще 2 файла:

  • app.js
  • package.json

После этой установки, конечно, вам нужно запустить npm install, чтобы установить основные зависимости.

И для того, чтобы socket.io в вашем проекте выполнял npm i -s socket.io

Используя эту установку, давайте сделаем необходимые изменения, чтобы заставить Socket.io работать в нашем проекте. Файлы, которые нужно изменить, следующие: / bin / www , /views/layout.html , /routes/users.js и app.js

  • в / bin / www

замените эту строку

var app = require('../app');

на

var app = require('../app').app;

и замените этот

var server = http.createServer(app);

на

var server = require('../app').server;
  • в /views/layout.html

замените этот код

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>
  <body>
  </body>
</html>

на этот

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>
  <body>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io('//localhost:3000');
      socket.on('socketToMe', function (data) {
          console.log(data);
      });
    </script>
  </body>
</html>
  • в app.js

чуть ниже этой строки

var app = express();

добавьте это

var server = require('http').Server(app);
var io = require('socket.io')(server);

и перед этой строкой

app.use(logger('dev'));

добавить это промежуточное ПО

app.use(function (req, res, next) {
    res.io = io;
    next();
});

Все это то, что требуется, и если хорошо вы готовы к работе.

Для целей тестирования вы можете немного изменить /routes/users.js:

var express = require('express');
var router = express.Router();/* GET users listing. */
router.get('/', function (req, res, next) {
    res.io.emit("socketToMe", "Users"); // This line was added to test Socket.io in action
    res.send('respond with a resource');
});module.exports = router;

, а затем запустите npm start, перейдите к http://localhost:3000/users, вы увидите Users в консоли браузера.

ЭТО СПАСИБО!

Дополнительное видео по вопросу: Каков наилучший способ использования Socket.io с расширенным проектом Express.JS

Создание веб чата на Socket.io и Node JS за 40 минут!

Создание Чата за 20 минут (Node Js, Socket IO)

Node.js - Знакомство с WebSocket