时间戳

首页 > 解决方案 > 将 Socket.io 与 Express.JS 生成项目一起使用的最佳方法是什么

javascript - 将 Socket.io 与 Express.JS 生成项目一起使用的最佳方法是什么

问题描述

由于我是 Express 的新手，我想知道用生成器安装它并在其中使用 Socket.io 的最佳方法是什么。

对于许多教程，他们展示了在手动安装的 Express 项目中安装 socket.io 的方法。

任何人都可以为此提出更好的解决方案吗？

标签： javascriptnode.jsexpresssocket.io

解决方案

您可以通过运行生成 NodeJS (Express 4.x) 新项目：npm install express --save并按照说明进行操作。在您的项目目录中有不同的文件夹之后：

  • bin：www（项目的基本配置文件）在哪里
  • public：/images、/javascritps 和 /stylesheets 存储在哪里
  • 路由：存储路由文件的位置（开头的 index.js 和 users.js）
  • 视图：我们在其中找到要使用的 .html 文件（开头的 index.html、layout.html 和 error.html）

我们还有 2 个文件：

  • 应用程序.js
  • 包.json

当然，在此安装之后，您需要运行npm install以安装基本依赖项。

并在您的项目中运行 socket.ionpm 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​​browse to http://localhost:3000/users，您应该Users在浏览器控制台中看到。

就这些，多谢！

推荐阅读