基于 Hapi.js 和 Socket.io 的实时聊天应用-JavaScript中文网-JavaScript教程资源分享门户

概述

实时聊天应用是现代 Web 应用中非常常见的一种功能，它可以让用户在网页上进行即时通讯。在这篇文章中，我们将介绍如何使用 Hapi.js 和 Socket.io 构建一个实时聊天应用。

Hapi.js 是一个 Node.js 的 Web 框架，它提供了一组强大的工具和插件，可以帮助我们轻松构建 Web 应用。Socket.io 是一个实时通讯框架，它可以在客户端和服务器之间建立持久化的双向连接，使得客户端和服务器能够实时地交换数据。

在本文中，我们将使用 Hapi.js 和 Socket.io 创建一个简单的实时聊天应用，并介绍如何将其部署到云服务器上。

技术栈

Hapi.js
Socket.io
Vue.js
MongoDB

构建后端

我们首先需要构建后端，使用 Hapi.js 和 Socket.io 创建一个 WebSocket 服务器。

安装依赖

npm install hapi socket.io

创建服务器

创建一个名为 server.js 的文件，并编写以下代码：

// javascriptcn.com 代码示例
const Hapi = require('@hapi/hapi');
const SocketIO = require('socket.io');

const server = Hapi.server({
  port: 3000,
  host: 'localhost'
});

const io = SocketIO(server.listener);

io.on('connection', (socket) => {
  console.log('a user connected');

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

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

const init = async () => {
  await server.start();
  console.log(`Server running at: ${server.info.uri}`);
};

init();

在这里，我们创建了一个 Hapi.js 服务器，监听在 localhost:3000 上。然后，我们使用 Socket.io 创建了一个 WebSocket 服务器，并在客户端连接和断开连接时打印一些信息。在客户端发送消息时，我们将消息广播给所有连接到服务器的客户端。

运行服务器

运行以下命令启动服务器：

node server.js

现在，WebSocket 服务器已经准备好了。我们可以使用任何支持 WebSocket 协议的客户端与服务器进行通信。

构建前端

接下来，我们将构建前端，使用 Vue.js 创建一个简单的聊天室。

安装依赖

使用 Vue CLI 创建一个新的 Vue.js 项目，并安装 socket.io-client：

vue create chatroom
cd chatroom
npm install socket.io-client

创建组件

创建一个名为 ChatRoom.vue 的组件，并编写以下代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <div v-for="message in messages" :key="message.id">
      {{ message.text }}
    </div>
    <form @submit.prevent="sendMessage">
      <input type="text" v-model="text" />
      <button type="submit">Send</button>
    </form>
  </div>
</template>

<script>
import io from 'socket.io-client';

export default {
  data() {
    return {
      text: '',
      messages: []
    };
  },
  mounted() {
    const socket = io('http://localhost:3000');

    socket.on('message', (message) => {
      this.messages.push(message);
    });
  },
  methods: {
    sendMessage() {
      const socket = io('http://localhost:3000');
      socket.emit('message', { id: Date.now(), text: this.text });
      this.text = '';
    }
  }
};
</script>

在这里，我们创建了一个简单的聊天室组件，它包含一个文本框和一个发送按钮，用来发送消息。我们使用 socket.io-client 创建一个 WebSocket 客户端连接到服务器，并在接收到新消息时将其添加到消息列表中。

运行前端

运行以下命令启动前端：

npm run serve

现在，我们可以在浏览器中打开 http://localhost:8080，并使用聊天室进行实时通讯了。

部署到云服务器

最后，我们需要将应用程序部署到云服务器上，以便用户可以在互联网上访问它。在这里，我们使用 Heroku 作为云服务器。

安装 Heroku CLI

安装 Heroku CLI 并登录：

brew tap heroku/brew && brew install heroku
heroku login

部署后端

首先，我们需要将后端代码上传到 Heroku，并将其部署为一个 Node.js 应用程序。

在 server.js 文件所在的目录中，运行以下命令初始化 Git 仓库：
```
git init
```
创建一个名为 Procfile 的文件，并编写以下代码：
```
web: node server.js
```
这个文件告诉 Heroku 如何启动我们的应用程序。
创建一个新的 Heroku 应用程序，并将 Git 仓库推送到 Heroku：
```
heroku create
git add .
git commit -m "Initial commit"
git push heroku master
```
这个命令将会自动构建并部署我们的应用程序。
打开浏览器，访问 Heroku 应用程序的 URL（例如 https://my-app.herokuapp.com），确保应用程序已经正确部署。

部署前端

接下来，我们需要将前端代码上传到 Heroku，并将其部署为一个静态网站。

在 chatroom 目录中，运行以下命令初始化 Git 仓库：
```
git init
```
在 package.json 文件中增加以下代码：
```
"scripts": {
  "build": "vue-cli-service build"
}
```
这个命令将会构建我们的应用程序。
运行以下命令构建应用程序：
```
npm run build
```
这个命令将会在 dist 目录中生成一个静态网站。
创建一个名为 Staticfile 的文件，并编写以下代码：
```
root: dist/
```
这个文件告诉 Heroku 如何启动我们的静态网站。
创建一个新的 Heroku 应用程序，并将 Git 仓库推送到 Heroku：
```
heroku create
git add .
git commit -m "Initial commit"
git push heroku master
```
这个命令将会自动构建并部署我们的静态网站。
打开浏览器，访问 Heroku 应用程序的 URL（例如 https://my-app.herokuapp.com），确保应用程序已经正确部署。

现在，我们已经成功地将应用程序部署到了云服务器上，用户可以在互联网上访问它了。

总结

在本文中，我们介绍了如何使用 Hapi.js 和 Socket.io 创建一个实时聊天应用，并将其部署到云服务器上。我们还介绍了如何使用 Vue.js 创建一个简单的聊天室，并与后端进行通讯。希望这篇文章对于那些正在学习前端开发的读者有所帮助。

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