使用 Hapi.js 和 Socket.IO 建立即时聊天应用-JavaScript中文网-JavaScript教程资源分享门户

在互联网时代，即时通讯已经成为了一个不可或缺的功能。无论是在线客服、社交、游戏还是其他场景，都离不开即时通讯。本文将介绍如何使用 Hapi.js 和 Socket.IO 建立一个简单的即时聊天应用。

Hapi.js 简介

Hapi.js 是一个基于 Node.js 的 Web 开发框架，它的目标是让 Web 应用开发变得更加简单、直观、快速。它内置了路由解析、中间件、异常处理、输入验证等许多功能，并且可以轻松集成其他的插件。

Socket.IO 简介

Socket.IO 是一个实时应用程序框架，它允许您在浏览器和服务器之间建立实时通信，例如聊天、通知等。它同时提供了 WebSocket 和轮询两种传输方式，以适应不同的网络环境。

实现一个简单的即时聊天应用

接下来，我们将基于 Hapi.js 和 Socket.IO 来实现一个简单的即时聊天应用。我们假设这个应用只有一个聊天室，用户可以在聊天室中发送文字消息，并且所有人都可以看到。

安装 Hapi.js 和 Socket.IO

首先，我们需要安装 Hapi.js 和 Socket.IO。在终端中运行以下命令来安装：

$ npm install hapi socket.io --save

创建 Hapi.js 服务器

在开始使用 Hapi.js 之前，我们需要创建一个服务器并且监听端口。在 index.js 文件中编写以下代码：

// javascriptcn.com 代码示例
const Hapi = require('hapi')
const server = new Hapi.Server()

server.connection({
  port: 3000
})

server.start((err) => {
  if (err) throw err
  console.log(`Server running at: ${server.info.uri}`)
})

以上代码创建了一个 Hapi.js 服务器，并且监听了端口号为 3000。

集成 Socket.IO

接下来，我们需要将 Socket.IO 集成到 Hapi.js 服务器中。在 index.js 文件底部添加以下代码：

const io = require('socket.io')(server.listener)

io.on('connection', (socket) => {
  console.log('A user connected')
  socket.on('disconnect', () => {
    console.log('A user disconnected')
  })
})

以上代码在服务器上启动了 Socket.IO，并且监听了 connection 事件和 disconnect 事件。当有用户连接或者断开连接时，会在控制台中打印相关日志。

创建聊天室页面

我们需要创建一个 HTML 页面，让用户可以在页面上发送文字消息到聊天室。在 public/index.html 文件中编写以下代码：

// javascriptcn.com 代码示例
<html>
  <head>
    <title>Chat Room</title>
  </head>
  <body>
    <div id="messages"></div>
    <form id="chat-form">
      <input type="text" id="message">
      <button type="submit">Send</button>
    </form>
  </body>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io()

    const messages = document.getElementById('messages')
    const form = document.getElementById('chat-form')
    const input = document.getElementById('message')

    form.addEventListener('submit', (e) => {
      e.preventDefault()
      socket.emit('message', input.value)
      input.value = ''
      input.focus()
    })

    socket.on('message', (msg) => {
      const li = document.createElement('li')
      li.textContent = msg
      messages.appendChild(li)
    })
  </script>
</html>

该页面包含一个聊天框和一个表单，用户可以在表单中输入消息，并发送到聊天框中。

使用 Socket.IO 发送和接收消息

当用户在页面中输入消息并且发送时，我们需要使用 Socket.IO 发送消息到服务器。在 index.js 文件中添加以下代码：

// javascriptcn.com 代码示例
io.on('connection', (socket) => {
  console.log('A user connected')

  socket.on('message', (msg) => {
    console.log(`Message: ${msg}`)
    io.emit('message', msg)
  })

  socket.on('disconnect', () => {
    console.log('A user disconnected')
  })
})

以上代码监听了 message 事件，当收到用户发送的消息时，会在控制台中打印消息，并将该消息广播给所有用户显示在聊天室页面上。

启动服务器

在完成以上所有步骤后，我们可以在终端中运行以下命令来启动服务器：

$ node index.js

然后打开浏览器，访问 http://localhost:3000，即可进入聊天室页面。

总结

通过本文，我们了解了如何使用 Hapi.js 和 Socket.IO 来实现一个简单的即时聊天应用。尽管这只是一个简单的示例，但它可以让我们了解到如何使用这两个技术，并且可以为我们进一步实现更为复杂的即时通讯应用提供指导。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6540e0317d4982a6eba72cfd