在本教程中，我们将看到如何使用Socket.io，Angular 10和NodeJS实现实时通知。使用WebSocket，我们可以在服务器和客户端之间进行全双工通信。
WebSocket 与 套接字
WebSocket 超越了典型的HTTP请求/响应范例。使用WebSockets，服务器和客户端可以发送数据而无需发起请求。
在本文中，我们将解释一个简单的示例，即我们可以向Web应用程序上的所有实时用户更新通知，简而言之，就是只要Web应用程序处于打开状态，我们就可以发送通知而无需客户端发出请求。
项目堆栈
在此示例中，我们将使用后端作为NodeJS，ExpressJS和 套接字 ，对于前端（客户端），我们将使用Angular 10和 套接字 客户端.
套接字服务器
So let’s start with server-side code by initiating the npm package.json file and will install the required dependencies which are express and socket.
安装
mkdir socket-server
cd socket-server
npm init
npm i express 套接字 express --save
以下是创建的 package.json
{
"name": "socketio",
"version": "1.0.0",
"description": "",
"main": " index.js ",
"scripts": {
"start": "node index.js "
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
" 套接字 ": "^2.3.0"
}
}
启动套接字服务器
Now will create the main entry file which is index.js and at the top, we will need our require statements for Express and 插座 .IO.
const express = require('express');
const app = express();
const port = 3000;
// Send Notification API
app.post('/send-notification', (req, res) => {
const notify = {data: req.body};
socket.emit('notification', notify); // Updates Live Notification
res.send(notify);
});
const server = app.listen(port, () => {
console.log(`Server connection on http://127.0.0.1:${port}`); // Server Connnected
});
// 插座 Layer over Http Server
const socket = require('socket.io')(server);
// On every Client Connection
socket.on('connection', socket => {
console.log('Socket: client connected');
});
On top of the HTTP server, we have also created the WebSocket using 套接字 library require('socket.io')(server) after that using socket’s on the method ( socket.on('connection', () => {}) ) which will be initiated on every new client connection which will be the angular client port in this case.
在“在路线上进行调用”之后，我们使用了套接字的emit方法，该方法将数据更新到客户端，而不会在服务器上发出请求。
例如，管理员希望向所有实时用户发送通知，以便管理员点击 http://127.0.0.1:3000/send-notification 它将向客户端发出通知。
what is
socket.emit()?socket.emit('notification', {})将创建一个名为`的频道 通知 `表格，我们可以确定在客户端的哪个位置使用哪个通道，下一个参数是该通道上的数据。
套接字客户端
正如我们刚刚创建的套接字服务器一样，现在下一部分将是套接字客户端，我们将在其中接收实时更新。
安装
因此，让我们使用CLI创建一个新的Angular项目，并安装所需的软件包，即socket.io-client和@ types / 套接字 -client。
ng new socket-client --routing=false --style=CSS
cd socket-client
npm i 套接字 -client @types/socket.io-client --save ## This is an Angular wrapper over 套接字 client libraries
以下是创建的 package.json
...
"dependencies": {
"@angular/animations": "~10.1.0",
"@angular/common": "~10.1.0",
"@angular/compiler": "~10.1.0",
"@angular/core": "~10.1.0",
"@angular/forms": "~10.1.0",
"@angular/platform-browser": "~10.1.0",
"@angular/platform-browser-dynamic": "~10.1.0",
"@angular/router": "~10.1.0",
"@types/socket.io-client": "^1.4.34",
"rxjs": "~6.6.0",
" 套接字 -client": "^2.3.1",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
}
...
接收套接字数据
安装后，我们可以在组件中使用socket.io-client软件包。
import * as io from 'socket.io-client';
...
export class AppComponent implements OnInit {
private socket: any;
public data: any;
constructor() {
// Connect 插座 with server URL
this.socket = io('http://127.0.0.1:3000');
}
public ngOnInit(): void {
this.socket.on('notification', data => {
this.data = data;
});
}
}
Inside the constructor, we have initiated the socket with the server URL so whenever the application starts it initiates the socket also before the ngOninit
And through the <b>notification</b> channel we can receive the live data on the client-side without making the request and manage in out component instance.