用百行代码打造实时聊天室：从零开始构建您的聊天应用

    <h1>用百行代码打造实时聊天室：从零开始构建您的聊天应用</h1>

    <h2>前言</h2>
    
    大家好，我是阿江，又和大家见面了。这次，我要给大家分享一个使用Vue.js、Node.js和Socket.IO在不到100行代码的情况下构建实时聊天室的教程。

    <h2>准备工作</h2>
    在开始之前，您需要确保已经安装了以下软件：

    * Node.js
    * npm
    * Vue.js CLI
    * Socket.IO

    如果您还没有安装这些软件，请按照以下步骤进行安装：

    1. 安装Node.js：
    
    ```sh
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
    source ~/.zshrc
    nvm install --lts
    nvm use --lts
    ```

    2. 安装npm：
    
    ```sh
    npm install -g npm@latest
    ```

    3. 安装Vue.js CLI：

    ```sh
    npm install -g @vue/cli
    ```

    4. 安装Socket.IO：

    ```sh
    npm install socket.io
    ```

    <h2>创建项目</h2>

    1. 使用Vue.js CLI创建一个新的项目：
    
    ```sh
    vue create chat-app
    ```

    2. 进入项目目录：
    
    ```sh
    cd chat-app
    ```

    <h2>安装依赖</h2>

    安装必要的依赖项：

    ```sh
    npm install socket.io-client
    ```

    <h2>创建服务器</h2>

    在项目目录中创建一个名为server.js的新文件，并添加以下代码：

    ```javascript
    const express = require('express');
    const socketIO = require('socket.io');

    const app = express();

    app.use(express.static('public'));

    const server = app.listen(3000);

    const io = socketIO(server);

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

      socket.on('message', (message) => {
        io.emit('message', message);
      });

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

    <h2>创建客户端</h2>

    在项目目录中的src目录下创建一个名为App.vue的新文件，并添加以下代码：

    ```html
    <template>
      <div id="app">
        <h1>实时聊天室</h1>
        <input type="text" v-model="message" @keyup.enter="sendMessage">
        <button @click="sendMessage">发送</button>
        <ul>
          <li v-for="message in messages">{{ message }}</li>
        </ul>
      </div>
    </template>

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

    export default {
      data() {
        return {
          message: '',
          messages: []
        }
      },
      methods: {
        sendMessage() {
          this.socket.emit('message', this.message);
          this.messages.push(this.message);
          this.message = '';
        },
        connect() {
          this.socket = socketIOClient('http://localhost:3000');
          this.socket.on('message', (message) => {
            this.messages.push(message);
          });
        }
      },
      created() {
        this.connect();
      }
    }
    </script>

    <style>
    #app {
      font-family: 'Arial';
    }

    h1 {
      margin-bottom: 1rem;
    }

    input {
      width: 100%;
      padding: 0.5rem;
      margin-bottom: 1rem;
    }

    button {
      padding: 0.5rem;
      margin-right: 1rem;
      background-color: #008CBA;
      color: white;
      border: none;
      border-radius: 5px;
    }

    ul {
      list-style-type: none;
      padding: 0;
    }

    li {
      padding: 0.5rem;
      margin-bottom: 1rem;
      background-color: #eee;
      border-radius: 5px;
    }
    </style>
    ```

    <h2>运行应用程序</h2>

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

    ```sh
    npm run serve
    ```

    现在，您应该就可以在浏览器中访问聊天室了。

    <h2>总结</h2>

    在这个教程中，我们学习了如何使用Vue.js、Node.js和Socket.IO来构建一个实时聊天室。这个聊天室可以发送和接收消息，并且可以实时显示消息。