前言
实时通信是现代 Web 应用程序不可或缺的特性之一。Hapi 是一个现代的 Node.js Web 应用程序框架，用于构建高度可扩展的 API。Socket.IO 是一个实现实时双向通信的 JavaScript 库，具有优秀的浏览器兼容性和可靠性。在本文中，我们将学习如何使用 Hapi 和 Socket.IO 来构建一个实时通信应用程序。
开始
安装依赖
首先，我们需要安装 Hapi 和 Socket.IO 的依赖库。打开终端并输入以下命令：
npm install --save hapi socket.io
创建服务器
我们将创建一个简单的 Hapi 服务器，该服务器将监听 Socket.IO 的连接请求，并广播接收到的消息。在 server.js 文件中输入以下代码：
const Hapi = require('hapi');
const io = require('socket.io');
const server = new Hapi.Server({ port: 3000 });
server.route({
method: 'GET',
path: '/',
handler: (request, h) => {
return 'Hello World!';
}
});
const socketServer = io(server.listener);
socketServer.on('connection', (socket) => {
console.log(`Socket ${socket.id} connected!`);
socket.on('message', (message) => {
console.log(`Socket ${socket.id} sent message: ${message}`);
socketServer.emit('message', message);
});
socket.on('disconnect', () => {
console.log(`Socket ${socket.id} disconnected!`);
});
});
server.start((err) => {
if (err) {
throw err;
}
console.log(`Server running at: ${server.info.uri}`);
});在上面的代码中，我们创建了一个 Hapi 服务器，并在其中添加了一个路由处理程序，该处理程序将在访问根路径时向客户端发送“Hello World！”消息。然后，我们创建了一个 Socket.IO 服务器，并将其连接到 Hapi 服务器的监听器上。我们使用 socketServer.on('connection', ...) 方法来处理连接请求，并使用 socketServer.emit('message', message) 方法向所有连接的客户端广播接收到的消息。
创建客户端
现在，我们将创建一个简单的客户端，该客户端将连接到我们刚刚创建的服务器，并发送和接收消息。在 index.html 文件中输入以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Realtime Chat</title>
</head>
<body>
<div id="messages"></div>
<form id="message-form">
<input type="text" id="message-input" />
<button type="submit">Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const messageForm = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
const messages = document.getElementById('messages');
messageForm.addEventListener('submit', (event) => {
event.preventDefault();
socket.emit('message', messageInput.value);
messageInput.value = '';
});
socket.on('message', (message) => {
const messageElement = document.createElement('div');
messageElement.textContent = message;
messages.appendChild(messageElement);
});
</script>
</body>
</html>在上面的代码中，我们在 body 中添加了一个 div 元素，作为消息列表的容器。然后，我们添加了一个表单，用于向服务器发送消息。我们使用 socket.emit('message', messageInput.value) 方法在客户端发送消息，并使用 socket.on('message', ...) 方法在客户端接收消息。每次接收到消息时，我们将其包装在一个 div 元素中，并将其添加到消息列表中。
运行应用
现在，我们已经完成了实时通信应用程序的开发，我来测试一下吧！在终端中输入以下命令以启动服务器：
node server.js
然后在浏览器中输入以下 URL 以访问客户端页面：
http://localhost:3000
现在，您可以在客户端页面中输入消息并单击“发送”按钮，然后在消息列表中查看发送和接收的消息。
总结
在本文中，我们学习了如何使用 Hapi 和 Socket.IO 构建实时通信应用程序。我们创建了一个简单的 Hapi 服务器，并使用 Socket.IO 处理了连接请求。我们还创建了一个简单的客户端，该客户端与服务器通信并显示发送和接收的消息。通过本文，您应该可以开始开发自己的实时通信应用程序，并使用 Hapi 和 Socket.IO 利用底层的传输协议来提供可靠的实时通信服务。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a48cffadd4f0e0ffcdaafb