极客笔记如何在JavaScript中接收服务器发送的事件通知？
随着Web应用程序的发展，越来越多的应用程序使用实时事件通知，以提供更好的用户体验。实时事件通知可以是服务器向客户端推送数据并通知客户端。这样，客户端就可以避免持续地向服务器发送请求并不断更新数据。这个过程称为”长轮询”技术。
现在我们可以使用WebSocket技术来实现这个功能。WebSocket是一个协议，用于在客户端和服务器之间建立持久连接。这样一来，服务器可以在任何时候将数据推送到客户端。在这篇文章中，我们将介绍如何在JavaScript中使用WebSocket接收服务器发送的事件通知。
服务端
我们使用Node.js和WebSocket协议作为示例。
在服务端，我们需要创建WebSocket服务器，并接收来自客户端的请求。
首先，我们需要安装ws包。打开终端，输入如下命令来安装：
npm install ws
然后，我们可以创建一个名为”server.js”的文件，并输入以下代码来启动WebSocket服务器：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('new client connected');
// 向客户端发送消息
ws.send('hello from server');
// 接收来自客户端的消息
ws.on('message', function incoming(data) {
console.log(`received message: ${data}`);
});
});
在以上代码中，我们创建了WebSocket服务器，以侦听端口“8080”。当有新的客户端连接到服务器时，wss.on('connection')回调函数将被调用。在这个回调函数中，我们可以向客户端发送消息，或接收来自客户端的消息。
现在，运行这个应用程序，当客户端连接到服务器时，服务器将向客户端发送一条欢迎消息。我们可以使用以下代码来启动服务器：
node server.js
客户端
在客户端，我们需要创建WebSocket连接，并接收来自服务器的消息。
在HTML文件中，我们可以使用以下代码来创建WebSocket连接：
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Test</title>
</head>
<body>
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.addEventListener('open', function(event) {
console.log('connected to server');
// 向服务器发送消息
socket.send('hello from client');
});
socket.addEventListener('message', function(event) {
console.log(`received message: ${event.data}`);
});
</script>
</body>
</html>
在以上代码中，我们使用new WebSocket('ws://localhost:8080')创建了WebSocket连接。当连接到服务器时，socket.addEventListener('open')回调函数将被调用，我们可以在这个回调函数中向服务器发送消息。当从服务器接收到消息时，socket.addEventListener('message')回调函数将被调用。
现在，我们可以通过打开一个新的浏览器窗口来测试这个应用程序。我们可以使用以下代码在浏览器中打开这个文件：
google-chrome index.html
在打开的控制台中，我们可以看到以下输出：
connected to server
received message: hello from server
received message: hello from client
这样，我们就成功地在JavaScript中接收了来自服务器的事件通知。
结论
WebSocket是一种协议，可以用于在客户端和服务器之间建立持久连接。这样一来，服务器可以在任何时候将数据推送到客户端。在这篇文章中，我们介绍了如何在JavaScript中使用WebSocket接收服务器发送的事件通知，以及如何在Node.js中创建WebSocket服务器。