如何在Node.js中的Express Framework中正确使用Socket.IO

本文概述

要求
实现

套接字将网络抽象为易于处理和使用的东西。 Socket.IO支持基于事件的实时双向通信, 可在每个平台, 浏览器或设备上工作, 并同时关注可靠性和速度。
Socket.IO为你处理大量技术替代方案带来的顺畅降级, 以实现双向近距离通信流(Web套接字, ajax长轮询, 闪存等)。此外, 它可以为你处理浏览器的不一致和不同的支持级别, 并且至少在目前, 它比使用普通的Web套接字更容易使用。
在本文中, 你将在几分钟内学习如何轻松使用Socket.IO和Express Framework, 这是极简主义的Web框架。
要求在Node.js控制台中执行以下命令, 在项目上安装Express：

npm install express --save

同样, 在你的项目中安装Socket.IO, 并在Node.js控制台中执行以下命令：

npm install socket.io --save

你就可以开始了！
实现为了正确使用Express和Socket.IO, 我们需要使用node.js的http模块, 因为它将由服务器负责。变量服务器是createServer方法的返回对象(该方法将express app作为第一个参数), 并且服务器变量将在socket.io模块的listen方法中用作第一个参数。
在任意位置创建文件(名为server.js), 并在其上添加以下代码：
注意：要单独启动服务器, listen方法需要从服务器变量而不是应用程序本身执行。你需要了解这一点, 以防止出现诸如” SocketIO：err_connection_refused” 之类的已知错误。

var http = require('http'); var express = require('express'); var app = express(); var server = http.createServer(app); // Pass a http.Server instance to the listen methodvar io = require('socket.io').listen(server); // The server should start listeningserver.listen(80); // Register the index route of your app that returns the HTML fileapp.get('/', function (req, res) {console.log("Homepage"); res.sendFile(__dirname + '/index.html'); }); // Expose the node_modules folder as static resources (to access socket.io.js in the browser)app.use('/static', express.static('node_modules')); // Handle connectionio.on('connection', function (socket) {console.log("Connected succesfully to the socket ..."); var news = [{ title: 'The cure of the Sadness is to play Videogames', date:'04.10.2016'}, { title: 'Batman saves Racoon City, the Joker is infected once again', date:'05.10.2016'}, { title: "Deadpool doesn't want to do a third part of the franchise", date:'05.10.2016'}, { title: 'Quicksilver demand Warner Bros. due to plagiarism with Speedy Gonzales', date:'04.10.2016'}, ]; // Send news on the socketsocket.emit('news', news); socket.on('my other event', function (data) {console.log(data); }); });

我们的服务器端代码应首先使用。如你所见, 当浏览器与套接字之间存在传入连接时, 我们将在Node控制台中打印” 已成功连接到套接字” 消息, 并将一些信息发送到浏览器中的活动套接字(在这种情况下, 我们将发送一个简单的对象, 其中包含一些” 新闻” 以呈现在index.html文件中)。
注意：app.use(‘ / static’ )行将显示服务器中的node_modules文件夹, 以便访问index.html中的socket.io.js文件。你可以删除此行, 然后从socket.io文件夹中复制socket.io.js, 然后直接将其复制到index.html所在的目录中, 以防你不想公开此文件夹。
同样, 我们刚刚将索引路由(/)添加了一个文件作为返回值(index.html), 该文件将包含以下代码：

< !DOCTYPE html> < html> < head> < meta charset="utf-8"> < title> Socket.io< /title> < /head> < body> < h1> Express and socket.io< /h1> < div id="news-list"> < /div> < script src="http://www.srcmini.com/static/socket.io/node_modules/socket.io-client/socket.io.js"> < /script> < script> var socket = io('http://localhost:80'); socket.on('news', function (data) {var div = document.getElementById("news-list"); console.log("Rendering news : ", data); for(var i = 0; i < data.length; i++){var newsItem = data[i]; div.innerHTML += "< h3> " + newsItem.title + ' < small> '+ newsItem.date + "< /small> < /h3> < br> "; }socket.emit('my other event', { my: 'data' }); }); < /script> < /body> < /html>

声明套接字变量将打开浏览器和服务器之间的连接(通过套接字), 这将导致在server.js文件中执行on(” connection” )方法, 并发送将在其中处理的信息风景。
现在, 你只需要测试一下！在节点控制台中执行server.js文件并执行以下命令：