用Vue3和Node创建你的第一个即时通讯聊天室应用！

前端

2023-12-12 04:31:46

前言

实时通讯在当今的网络世界中扮演着越来越重要的角色，它使人们能够通过互联网进行实时交流和互动。WebSocket是一种非常流行的实时通讯技术，它允许在浏览器和服务器之间建立全双工的通信通道，从而实现双向数据传输和即时响应。

搭建环境

在开始之前，你需要确保你的计算机上已经安装了必要的工具和软件：

Node.js（版本12或更高）
Vue.js（版本3或更高）
编辑器或IDE（如Visual Studio Code）

前端开发

1. 初始化Vue.js项目

首先，创建一个新的Vue.js项目，可以使用Vue CLI工具：

vue create my-chat-app

2. 安装依赖

安装必要的依赖项：

npm install socket.io-client

3. 创建聊天室组件

在src目录下创建一个新的组件文件ChatRoom.vue，并添加以下代码：

<template>
  <div>
    <input type="text" v-model="message">
    <button @click="sendMessage">发送</button>
    <ul>
      <li v-for="msg in messages">{{ msg }}</li>
    </ul>
  </div>
</template>

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

export default {
  data() {
    return {
      messages: [],
      message: ""
    };
  },
  methods: {
    sendMessage() {
      this.socket.emit("message", this.message);
      this.message = "";
    },
    connectSocket() {
      this.socket = io();
      this.socket.on("message", (msg) => {
        this.messages.push(msg);
      });
    }
  },
  mounted() {
    this.connectSocket();
  }
};
</script>

4. 注册聊天室组件

在src/App.vue文件中，将ChatRoom组件注册为一个子组件：

<template>
  <ChatRoom />
</template>

后端开发

1. 初始化Node.js项目

创建一个新的Node.js项目，并在项目根目录下创建一个server.js文件。

2. 安装依赖

安装必要的依赖项：

npm install express socket.io

3. 创建WebSocket服务器

在server.js文件中，添加以下代码：

const express = require("express");
const socketIO = require("socket.io");

const app = express();
app.use(express.static("public"));

const server = app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

const io = socketIO(server);

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

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

  socket.on("disconnect", () => {
    console.log("A client has disconnected");
  });
});