Vue.js+Express.js 实战：开发一个简单的在线聊天室应用-JavaScript中文网-JavaScript教程资源分享门户

在线聊天室应用，早已不是一个新鲜的东西了。在当今社交网络蓬勃发展的时期，人们已经很容易地习惯了通过互联网和智能终端进行在线聊天。现在，我们将使用 Vue.js 和 Express.js 框架来实现一个简单的在线聊天应用。

技术栈

在本次项目中，我们使用了以下技术：

Vue.js：一个便于构建用户界面的 JavaScript 框架。
Express.js：一个基于 Node.js 平台的 Web 开发框架。
Socket.io：一个基于 WebSocket 的实时通信引擎。

开始前的准备

在开始之前，我们需要先安装以下软件：

Node.js 和 npm：开发环境需要。
Vue CLI：Vue.js 的脚手架工具。

完成安装后，我们可以开始构建我们的聊天室应用。

Vue.js 部分

首先，我们需要使用 Vue CLI 创建一个新的 Vue.js 项目：

vue create chat-app

接着，在 src 目录下创建以下文件：

Chat.vue：聊天室界面组件。
Login.vue：登录界面组件。
main.js：应用入口文件。

Login.vue

在 Login.vue 文件中，我们将创建一个简单的登录表单，用于输入用户的昵称：

// javascriptcn.com 代码示例
<template>
  <div>
    <h2>Enter your nickname</h2>
    <form @submit.prevent="login">
      <input v-model="nickname" type="text" />
      <button>Login</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      nickname: null,
    };
  },
  methods: {
    login() {
      if (this.nickname) {
        this.$emit("login", this.nickname);
      }
    },
  },
};
</script>

在上面的代码中，我们定义了一个用于输入昵称的表单，同时也定义了一个登录方法。

Chat.vue

在 Chat.vue 文件中，我们将创建一个简单的聊天室界面，用于显示聊天消息和输入新的消息。

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

<script>
export default {
  name: "Chat",
  props: {
    nickname: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      message: null,
      messages: [],
    };
  },
  methods: {
    sendMessage() {
      if (this.message) {
        this.$emit("send", {
          nickname: this.nickname,
          content: this.message,
        });
        this.message = null;
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.scrollChatRoom();
    });
  },
  updated() {
    this.scrollChatRoom();
  },
  watch: {
    messages(newValue) {
      if (newValue.length > 100) {
        this.messages.shift();
      }
    },
  },
};
</script>

在上面的代码中，我们定义了一个聊天室界面，包括用于显示消息和用于输入新消息的表单。

main.js

在 main.js 文件中，我们将创建一个 Vue 实例，用于整个应用的管理。

// javascriptcn.com 代码示例
import Vue from "vue";
import Login from "./Login.vue";
import Chat from "./Chat.vue";
import io from "socket.io-client";

const socket = io("http://localhost:3000");

new Vue({
  el: "#app",
  components: {
    Login,
    Chat,
  },
  data() {
    return {
      nickname: null,
      isLoggedIn: false,
      messages: [],
    };
  },
  methods: {
    login(nickname) {
      this.nickname = nickname;
      this.isLoggedIn = true;
    },
    sendMessage(message) {
      socket.emit("message", message);
    },
    receiveMessage(message) {
      this.messages.push(message);
    },
    scrollChatRoom() {
      const chatRoom = this.$refs.chatRoom;
      chatRoom.scrollTop = chatRoom.scrollHeight;
    },
  },
  mounted() {
    socket.on("message", this.receiveMessage);
  },
  updated() {
    this.scrollChatRoom();
  },
  template: `
    <div>
      <Login v-if="!isLoggedIn" @login="login" />
      <Chat v-if="isLoggedIn" :nickname="nickname" :messages="messages" @send="sendMessage" />
    </div>
  `,
});

在上面的代码中，我们定义了一个应用实例，并把 Login 和 Chat 组件注册为全局组件。我们也定义了一些方法用于管理整个应用实例并通过 Socket.io 进行实时通信。

Express.js 部分

上面我们已经完成了前端部分的开发，现在我们来进行服务端的开发。

首先，我们需要在项目目录中创建一个新的目录，用于存放服务端代码。

接着，在服务端目录中执行以下命令以安装 express 和 socket.io：

npm install express socket.io --save

server.js

在服务端目录中，我们创建一个新的文件 server.js，用于启动服务和处理请求。

// javascriptcn.com 代码示例
const app = require("express")();
const server = require("http").createServer(app);
const io = require("socket.io")(server, {
  cors: {
    origin: "*",
  },
});

const PORT = 3000;

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

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

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

app.get("/", (req, res) => {
  res.send("Server is running");
});

server.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

在上面的代码中，我们使用 express 框架创建一个 http 服务器，并使用 socket.io 创建一个 WebSocket 连接。我们使用 io.on() 方法监听客户端连接，并使用 socket.on() 方法监听客户端发送的消息。

运行应用

现在我们已经完成了服务端和客户端的代码编写，接下来我们来运行应用。我们需要在两个不同的终端分别运行以下命令：

# 在客户端目录中
npm run serve

# 在服务端目录中
node server.js

完成上面的操作后，我们就可以在浏览器中访问 http://localhost:8080（默认端口号为 8080）来启动聊天室应用了。

总结

通过本次实战，我们学习了如何使用 Vue.js 和 Express.js 框架构建一个简单的在线聊天室应用。我们已经实现了以下功能：

登录界面：用于输入用户昵称。
聊天室界面：用于显示聊天消息和输入新消息。
实时通信：使用 socket.io 来实现客户端和服务端的实时通信。

在这个项目的基础上，你可以继续增加更多的功能，比如支持聊天室分组、消息撤回等等，让它变得更加完善。

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