Node.js 中实时数据通信的多种方式
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
介绍
在本文中，我们将讨论各种实时数据通信技术。
实时通信是一种电信模式，所有连接的客户端可以即时或以极低的传输延迟交换信息。我们可以通过多种技术在客户端和服务器之间实时交换信息，以下列举一些：
技术
- 轮询
- 服务器发送事件
- Web 套接字
1. 民意调查
-
这是一种“客户端拉取”架构，客户端会定期向服务器请求更新。
-
客户端等待特定时间后，向服务器请求新的更新。
-
它是一种半双工或单向通信，一次只允许一个方向的传输。
-
它基于HTTP协议。
-
高延迟传输。
-
浏览器支持：为了在客户端接收或发送“轮询”更新，我们将使用 XMLHttpRequest JavaScript API，其浏览器支持可在caniuse上找到。
让我们在 Node.js 中实现这项技术。
1）打开终端并创建一个文件夹轮询
mkdir polling && cd polling
2）现在在文件夹中初始化 npm
npm init -y
3）创建app.js文件并在其中编写一些代码。
const express = require('express')
const app = express()
const port = 80
app.use('/', express.static('public'));
var data = "Real-Time Update 1";
var number = 1;
app.get('/', (req, res) => {
res.send({"update": data})
});
var interval = setInterval(function(){
data = "Real-Time Update "+number;
console.log("SENT: "+data);
number++;
}, randomInteger(2,9)*1000);
function randomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
app.listen(port, () => {
console.log(`Listening at http://localhost:${port}`)
})
4）安装所需的依赖项或库。
npm install --save express
5）创建公共文件夹。
mkdir public && cd public
6）在public文件夹内创建html文件夹。
mkdir html && cd html
7) 在 public 文件夹内创建index.html文件，并在其中编写一些代码。
<html>
<head>
<title>Polling</title>
</head>
<body>
<div id="updates"></div>
</body>
<script type="text/javascript">
var interval = setInterval(function(){
getUpdates();
}, 5000);
function getUpdates()
{
var xhr = new XMLHttpRequest();
xhr.open("GET", "/", true);
xhr.onload = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.getElementById('updates').innerHTML = document.getElementById('updates').innerHTML + "Received: "+JSON.parse(xhr.responseText).update+"</br>";
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.send(null);
}
</script>
</html>
8) 执行app.js文件
//if you are inside html folder then go to your root project directory
cd ../..
//Now execute the app.js file
node app.js
9) 打开浏览器并访问http://localhost/html/index.html
我们已成功在Node.js中实现了轮询技术。正如您所看到的，它的传输延迟非常高。
2. 服务器发送事件
-
它是一种“服务器推送”架构，服务器一旦收到新信息，就会立即将更新推送给客户端。
-
最初，客户端向服务器发送握手请求；握手或建立连接后，客户端不允许向服务器发送数据，只有服务器才能向客户端推送更新。
-
这是一种半双工或单向通信方式。但握手之后，只有服务器可以发送数据。
-
它基于HTTP协议。
-
提供低延迟传输。
-
为了在客户端接收或发送“服务器发送事件”更新，我们将使用 EventSource JavaScript API，其浏览器支持可在caniuse上找到。
让我们在 Node.js 中实现这项技术。
1）打开终端并创建一个名为server-sent-events 的文件夹
mkdir server-sent-events && cd server-sent-events
2）现在在文件夹中初始化 npm
npm init -y
3）创建app.js文件并在其中编写一些代码。
const express = require('express')
const app = express()
const port = 80
app.use('/', express.static('public'));
var data = "Real-Time Update 1";
var number = 1;
app.get('/server-sent-events', function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
var interval = setInterval(function(){
data = "Real-Time Update "+number;
console.log("SENT: "+data);
res.write("data: " + data + "\n\n")
number++;
}, randomInteger(2,9)*1000);
// close
res.on('close', () => {
clearInterval(interval);
res.end();
});
})
function randomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
app.listen(port, () => {
console.log(`Listening at http://localhost:${port}`)
})
4）安装所需的依赖项或库。
npm install --save express
5）创建公共文件夹。
mkdir public && cd public
6）在public文件夹内创建html文件夹。
mkdir html && cd html
7) 在 public 文件夹内创建index.html文件，并在其中编写一些代码。
<html>
<head>
<title>Server Sent Events</title>
</head>
<body>
<div id="updates"></div>
</body>
<script type="text/javascript">
var source = new EventSource('/server-sent-events')
source.addEventListener('message', function(e) {
document.getElementById('updates').innerHTML = document.getElementById('updates').innerHTML + "Received: "+e.data+"</br>";
}, false)
</script>
</html>
8) 执行app.js文件
//if you are inside html folder then go to your root project directory
cd ../..
//Now execute the app.js file
node app.js
9) 打开浏览器并访问http://localhost/html/index.html
我们已成功在 Node.js 中实现了服务器发送事件 (Server ENTE)技术。我们可以使用此协议来实现仅涉及“服务器到客户端的数据传输”的功能。
3. Web套接字
-
它是一种“服务器推送”架构。
-
握手之后，客户端和服务器都可以随时发送或接收信息。
-
这是一种全双工或双向通信，客户端和服务器同时发送和接收信息。
-
它基于HTTP和TCP/IP协议。
-
提供低延迟传输。
-
为了在客户端接收或发送“Web Sockets”更新，我们将使用 WebSocket JavaScript API，其浏览器支持可在caniuse上找到。
让我们在 Node.js 中实现这项技术。
1) 打开终端并创建一个名为websockets 的文件夹
mkdir websockets && cd websockets
2）现在在文件夹中初始化 npm
npm init -y
3）创建app.js文件并在其中编写一些代码。
const http = require('http')
const express = require('express')
const WebSocket = require('ws')
const app = express()
const port = 80
app.use('/', express.static('public'));
const server = http.createServer(app);
const wss = new WebSocket.Server({ server })
var data = "Real-Time Update 1";
var number = 1;
wss.on('connection', ws => {
ws.on('message', message => {
console.log(`Received message => ${message}`)
})
var interval = setInterval(function(){
data = "Real-Time Update "+number;
console.log("SENT: "+data);
ws.send(data)
number++;
}, randomInteger(2,9)*1000);
ws.on('close', function close() {
clearInterval(interval);
});
})
function randomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
server.listen(port, () => {
console.log(`Listening at http://localhost:${port}`)
})
4）安装所需的依赖项或库。
npm install --save express
npm install --save ws
5）创建公共文件夹。
mkdir public && cd public
6）在public文件夹内创建html文件夹。
mkdir html && cd html
7) 在 public 文件夹内创建index.html文件，并在其中编写一些代码。
<html>
<head>
<title>Server Sent Events</title>
</head>
<body>
<div id="updates"></div>
</body>
<script type="text/javascript">
const connection = new WebSocket('ws://localhost:80')
connection.onmessage = e => {
document.getElementById('updates').innerHTML = document.getElementById('updates').innerHTML + "Received: "+e.data+"</br>";
}
</script>
</html>
8) 执行app.js文件
//if you are inside html folder then go to your root project directory
cd ../..
//Now execute the app.js file
node app.js
9) 打开浏览器并访问http://localhost/html/index.html
我们已成功在Node.js中实现了WebSocket技术。
概括
结论
我们已经讨论了一些最常用的技术，除此之外，还有数百种技术可用于实时数据传输。
您可以在GitHub上找到整个项目。
文章来源：https://dev.to/kalpitrathore/various-ways-of-real-time-data-communication-in-node-js-1h2b