Node.js + WebSocket + Vue 打造多人聊天室：第二章

引言

在 第一章 中，我们对 Node.js + WebSocket + Vue 的技术栈进行了初步介绍，并构建了基本的聊天室框架。本章将继续深入探讨技术细节，提供分步指南和示例代码，帮助开发者创建自己的多人聊天室应用。

WebSocket 服务器

WebSocket 服务器负责管理聊天室中的所有连接。它的职责包括：

• 验证和处理来自客户端的 WebSocket 请求
• 向客户端广播消息
• 管理用户列表

可以使用 Node.js 中的 WebSocket 模块创建 WebSocket 服务器。

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  // 处理客户端连接
});

wss.on('message', (message) => {
  // 广播消息
});

客户端连接

客户端通过 WebSocket 连接到服务器。客户端负责：

• 建立与服务器的 WebSocket 连接
• 发送和接收消息

在 Vue.js 中，可以使用 Vuex 来管理客户端状态，包括 WebSocket 连接和消息列表。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    ws: null,
    messages: [],
  },
  getters: {
    ws(state) { return state.ws; },
    messages(state) { return state.messages; },
  },
  mutations: {
    setWs(state, ws) { state.ws = ws; },
    addMessage(state, message) { state.messages.push(message); },
  },
  actions: {
    connect({ commit }) {
      const ws = new WebSocket('ws://localhost:8080');
      ws.onopen = () => commit('setWs', ws);
      ws.onmessage = (e) => commit('addMessage', e.data);
    },
    sendMessage({ state }, message) {
      if (state.ws) state.ws.send(message);
    },
  },
});

用户界面

聊天室的用户界面使用 Vue.js 构建。它包含一个消息列表、一个文本输入框和一个发送按钮。

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

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['messages', 'newMessage']),
  },
  methods: {
    ...mapActions(['sendMessage']),
  },
};
</script>

总结

本章深入探讨了 Node.js + WebSocket + Vue 技术栈在多人聊天室应用中的应用。我们介绍了 WebSocket 服务器和客户端连接的实现，并展示了如何使用 Vuex 管理客户端状态和构建用户界面。在下一章中，我们将介绍如何将用户认证和消息持久化添加到聊天室中。