带你开启 Node.js 之旅：构建实时聊天小应用

你是否常常想要拥有一个属于自己的聊天应用，但技术小白的头衔让你望而却步？现在，是时候甩掉技术恐惧，踏上 Node.js 的技术之旅了。今天，我们将从一个实时聊天小应用开始，开启我们的 Node.js 之旅！

Node.js 入门：构建实时聊天小应用

作为初入门的菜鸟，我们选择 Egg.js 框架和 Socket.IO 库来构建我们的聊天小应用。Egg.js 提供了开箱即用的特性和灵活的插件机制，非常适合新手；而 Socket.IO 则可以让我们的聊天应用实现实时通信。

准备工作

在开始之前，我们需要确保我们的本地环境已经准备好。我们需安装 Node.js 和 npm，这两个都是 Node.js 的必备组件。

# 安装 Node.js
node -v

# 安装 npm
npm -v

接下来，我们需要安装 Egg.js 和 Socket.IO：

# 安装 Egg.js
npm install egg --save

# 安装 Socket.IO
npm install socket.io --save

创建项目

准备好环境后，我们就可以创建一个新的 Egg.js 项目了。

mkdir chat-app && cd chat-app

# 初始化 Egg.js 项目
egg-init

搭建服务端

进入项目目录后，我们就可以开始搭建服务端了。

在项目目录中创建 app.js 文件，并加入以下代码：

// app.js

'use strict';

const egg = require('egg');

class AppBootHook {
  constructor(app) {
    this.app = app;
  }

  async willReady() {
    // 初始化 Socket.IO
    this.io = require('socket.io')(this.app.config.io.port);

    // 注册 Socket.IO 事件处理函数
    this.io.on('connection', socket => {
      console.log('a user connected');

      socket.on('message', msg => {
        // 将消息广播给所有连接的用户
        this.io.emit('message', msg);
      });

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

module.exports = AppBootHook;

搭建客户端

服务端搭建完成后，我们就可以开始搭建客户端了。

在项目目录中创建 app.vue 文件，并加入以下代码：

<!-- app.vue -->

<template>
  <div id="chat-app">
    <input type="text" v-model="message" @keyup.enter="sendMessage">
    <ul>
      <li v-for="msg in messages">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      message: '',
    }
  },
  methods: {
    sendMessage() {
      // 将消息发送给服务端
      this.$socket.emit('message', this.message);

      // 清空输入框
      this.message = '';
    }
  },
  mounted() {
    // 连接到 Socket.IO 服务
    this.$socket = io();

    // 监听来自服务端的消息
    this.$socket.on('message', msg => {
      this.messages.push(msg);
    });
  }
}
</script>

运行应用

现在，我们就可以运行我们的聊天应用了。

在项目目录中执行以下命令：

# 启动服务端
npm run dev

# 启动客户端
npm run serve

打开浏览器，访问 http://localhost:7001，就可以看到我们的聊天应用了。

结语

恭喜你，你已经成功构建了一个简单的实时聊天小应用！通过这个应用，你已经掌握了 Node.js、Egg.js 和 Socket.IO 的基础知识。现在，你可以继续学习更高级的知识，开发出更多酷炫的应用。

欢迎你加入 Node.js 的世界，让我们一起探索更多可能！