srcmini本文概述
套接字将网络抽象为易于处理和使用的东西。 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 method
var io = require('socket.io').listen(server);
// The server should start listening
server.listen(80);
// Register the index route of your app that returns the HTML file
app.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 connection
io.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 socket
socket.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="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文件并执行以下命令：
node server.js在你喜欢的浏览器中导航到http：// localhost：80, 套接字连接应该正常工作(并且按照我们的逻辑计划, 将绘制新闻)：
玩得开心 ！
评论前必须登录！
注册