Vue.js使用WebSocket构建聊天应用

该文档是关于使用Vue.js和WebSocket技术模拟实现聊天功能的教程。它指导如何在Vue项目中设置WebSocket服务器，以便实现实时通信。 在JavaScript（特别是Vue.js）环境中，WebSocket是一种用于实现双向通信的强大工具，常用于构建实时、交互性强的应用，如聊天应用。Vue.js是一个轻量级的前端框架，它提供了简洁的模板语法和组件化机制，便于构建用户界面。WebSocket则允许客户端和服务器之间保持持续的连接，以便数据能即时发送和接收，而无需重复的HTTP请求。 在描述中提到，首先要在Vue项目的根目录下创建一个名为`server.js`的文件，这个文件将作为WebSocket服务器。为了安装必要的WebSocket库`ws`，需要在服务器目录下运行`npm install --s ws`命令。安装完成后，可以编写以下代码： ```javascript var userNum = 0; // 统计在线人数 var chatList = []; // 记录聊天记录 var WebSocketServer = require('ws').Server; wss = new WebSocketServer({ port: 8181 }); // 8181 与前端对应 // 定义广播函数，用于向所有连接的客户端发送消息 wss.broadcast = function (msg) { wss.clients.forEach(function (each) { each.send(msg); }); }; wss.on('connection', function (ws) { userNum++; // 建立连接成功，在线人数+1 wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList })); // 建立连接成功，广播当前在线人数 console.log('已连接客户端:', userNum); // 监听客户端发送的消息 ws.on('message', function (e) { var resData = JSON.parse(e); console.log('收到客户端消息：' + resData.msg); chatList.push({ userId: resData.userId, content: resData.msg }); // 存储消息，并通过广播传递 wss.broadcast(JSON.stringify({ userId: resData.userId, msg: resData.msg })); // 广播消息 }); ws.on('close', function (e) { userNum--; // 连接关闭，在线人数-1 wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList })); console.log('客户端断开连接:', userNum); }); }); ``` 这个`server.js`文件的主要功能包括： 1. 初始化WebSocket服务器，并监听8181端口。 2. 当有新的客户端连接时，增加在线人数并广播当前的在线人数和聊天记录。 3. 处理接收到的客户端消息，将其添加到聊天记录中，并广播给所有连接的客户端。 4. 当客户端断开连接时，减少在线人数并再次广播更新后的在线人数。 通过这种方式，每个新加入的用户都能接收到之前聊天记录，从而实现聊天功能。在前端Vue应用中，需要设置WebSocket连接，并监听服务器的事件来更新UI，以展示聊天内容和在线用户数量。 这个文档提供了一个基础的WebSocket聊天应用的实现方案，结合Vue.js的响应式特性，可以构建出一个实时、互动的聊天环境。在实际开发中，可能还需要考虑错误处理、身份验证、消息分页、离线消息存储等更复杂的功能。