Electron-Wechat电脑端聊天 | ViteElectron仿微信桌面端聊天系统引言在当今社交网络时代微信已成为人们日常沟通的重要工具。然而微信官方桌面端在某些场景下存在功能受限或体验不佳的问题。作为全栈工程师我们可以利用 Electron 和 Vite 构建一个功能完善的仿微信桌面端聊天系统。本文将带你从零开始使用 Vite 作为构建工具Electron 作为桌面应用框架实现一个具备消息收发、联系人管理、界面仿微信的聊天系统。## 技术栈概览-Electron跨平台桌面应用框架基于 Chromium 和 Node.js-Vite下一代前端构建工具提供极速开发体验-Vue 3响应式前端框架-Socket.IO实时通信库用于 WebSocket 消息传递-Node.js后端服务与 Electron 主进程## 项目初始化与配置首先我们创建一个基于 Vite 的 Vue 3 项目并集成 Electron。bash# 创建 Vite 项目npm create vitelatest electron-wechat -- --template vuecd electron-wechat# 安装 Electron 相关依赖npm install electron electron-builder --save-dev# 安装 Socket.IO 客户端npm install socket.io-client# 安装其他依赖npm install vue-router4 pinia## 主进程与渲染进程通信Electron 应用分为主进程main process和渲染进程renderer process。主进程负责窗口管理、系统交互渲染进程负责 UI 展示。我们需要建立两者之间的通信桥梁。### 主进程代码electron/main.jsjavascript// electron/main.jsconst { app, BrowserWindow, ipcMain } require(electron);const path require(path);// 创建主窗口function createWindow() { const win new BrowserWindow({ width: 1200, height: 800, webPreferences: { preload: path.join(__dirname, preload.js), // 预加载脚本 contextIsolation: true, // 隔离渲染进程 nodeIntegration: false, // 禁用 Node.js 集成 }, }); // 开发环境加载 Vite 开发服务器 if (process.env.VITE_DEV_SERVER_URL) { win.loadURL(process.env.VITE_DEV_SERVER_URL); } else { // 生产环境加载打包后的文件 win.loadFile(path.join(__dirname, ../dist/index.html)); }}// 监听主进程与渲染进程通信ipcMain.on(send-message, (event, message) { console.log(收到渲染进程消息:, message); // 向渲染进程发送回复 event.sender.send(message-response, 服务器回复: ${message});});app.whenReady().then(() { createWindow(); app.on(activate, () { if (BrowserWindow.getAllWindows().length 0) { createWindow(); } });});app.on(window-all-closed, () { if (process.platform ! darwin) { app.quit(); }});### 预加载脚本electron/preload.jsjavascript// electron/preload.jsconst { contextBridge, ipcRenderer } require(electron);// 暴露安全的 API 给渲染进程contextBridge.exposeInMainWorld(electronAPI, { // 发送消息到主进程 sendMessage: (message) ipcRenderer.send(send-message, message), // 接收主进程消息 onMessageResponse: (callback) { ipcRenderer.on(message-response, (event, data) { callback(data); }); }, // 移除监听器 removeMessageListener: () { ipcRenderer.removeAllListeners(message-response); },});## 仿微信聊天界面实现接下来我们构建一个仿微信的聊天界面包含联系人列表和聊天窗口。### 聊天界面组件ChatWindow.vuevue!-- src/components/ChatWindow.vue --template div classchat-window !-- 联系人列表 -- div classcontact-list div v-forcontact in contacts :keycontact.id classcontact-item :class{ active: activeContact?.id contact.id } clickselectContact(contact) img :srccontact.avatar alt头像 classavatar / div classcontact-info div classname{{ contact.name }}/div div classlast-message{{ contact.lastMessage }}/div /div /div /div !-- 聊天区域 -- div classchat-area div classchat-header h2{{ activeContact?.name || 请选择联系人 }}/h2 /div div classmessage-list refmessageList div v-formsg in messages :keymsg.id classmessage :class{ self: msg.isSelf } div classmessage-content{{ msg.content }}/div div classmessage-time{{ formatTime(msg.timestamp) }}/div /div /div div classinput-area input v-modelnewMessage keyup.entersendMessage placeholder输入消息... classmessage-input / button clicksendMessage classsend-btn发送/button /div /div /div/templatescript setupimport { ref, onMounted, nextTick } from vue;import { io } from socket.io-client;// 联系人数据const contacts ref([ { id: 1, name: 张三, avatar: https://via.placeholder.com/50, lastMessage: 你好 }, { id: 2, name: 李四, avatar: https://via.placeholder.com/50, lastMessage: 在吗 }, { id: 3, name: 王五, avatar: https://via.placeholder.com/50, lastMessage: 今天天气不错 },]);const activeContact ref(null);const messages ref([]);const newMessage ref();const messageList ref(null);let socket null;// 选择联系人function selectContact(contact) { activeContact.value contact; messages.value [ { id: 1, content: 你好我是 contact.name, isSelf: false, timestamp: Date.now() - 60000 }, { id: 2, content: 很高兴认识你, isSelf: true, timestamp: Date.now() - 30000 }, ];}// 发送消息function sendMessage() { if (!newMessage.value.trim() || !activeContact.value) return; const message { id: Date.now(), content: newMessage.value, isSelf: true, timestamp: Date.now(), }; messages.value.push(message); // 通过 Socket.IO 发送消息 if (socket) { socket.emit(chat-message, { to: activeContact.value.id, content: newMessage.value, }); } // 通过 Electron IPC 发送到主进程 if (window.electronAPI) { window.electronAPI.sendMessage(newMessage.value); } newMessage.value ; scrollToBottom();}// 格式化时间function formatTime(timestamp) { const date new Date(timestamp); return ${date.getHours().toString().padStart(2, 0)}:${date.getMinutes().toString().padStart(2, 0)};}// 滚动到底部function scrollToBottom() { nextTick(() { if (messageList.value) { messageList.value.scrollTop messageList.value.scrollHeight; } });}onMounted(() { // 连接 Socket.IO 服务器假设后端运行在 localhost:3000 socket io(http://localhost:3000); socket.on(connect, () { console.log(Socket.IO 连接成功); }); socket.on(new-message, (data) { if (data.from activeContact.value?.id) { messages.value.push({ id: Date.now(), content: data.content, isSelf: false, timestamp: Date.now(), }); scrollToBottom(); } }); // 监听 Electron 主进程回复 if (window.electronAPI) { window.electronAPI.onMessageResponse((response) { console.log(收到主进程回复:, response); }); }});/scriptstyle scoped.chat-window { display: flex; height: 100vh; background: #f5f5f5;}.contact-list { width: 300px; background: #fff; border-right: 1px solid #ddd; overflow-y: auto;}.contact-item { display: flex; align-items: center; padding: 15px; cursor: pointer; transition: background 0.2s;}.contact-item:hover { background: #e8f0fe;}.contact-item.active { background: #c8e6c9;}.avatar { width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;}.contact-info { flex: 1;}.name { font-weight: bold; font-size: 16px;}.last-message { color: #999; font-size: 12px; margin-top: 5px;}.chat-area { flex: 1; display: flex; flex-direction: column;}.chat-header { padding: 15px; background: #fff; border-bottom: 1px solid #ddd;}.message-list { flex: 1; overflow-y: auto; padding: 15px;}.message { margin-bottom: 15px; display: flex; flex-direction: column;}.message.self { align-items: flex-end;}.message-content { background: #fff; padding: 10px 15px; border-radius: 10px; max-width: 60%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);}.message.self .message-content { background: #95ec69;}.message-time { font-size: 10px; color: #999; margin-top: 5px;}.input-area { display: flex; padding: 15px; background: #fff; border-top: 1px solid #ddd;}.message-input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px;}.send-btn { margin-left: 10px; padding: 10px 20px; background: #07c160; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 14px;}.send-btn:hover { background: #06ad56;}/style## 后端 Socket.IO 服务器为了实现实时消息通信我们需要一个简单的后端服务器。### 服务器代码server/index.jsjavascript// server/index.jsconst express require(express);const http require(http);const { Server } require(socket.io);const app express();const server http.createServer(app);const io new Server(server, { cors: { origin: *, // 允许所有来源生产环境需限制 },});// 存储在线用户const onlineUsers new Map();io.on(connection, (socket) { console.log(用户连接:, socket.id); // 用户登录 socket.on(user-login, (userId) { onlineUsers.set(userId, socket.id); console.log(用户 ${userId} 上线); }); // 聊天消息 socket.on(chat-message, (data) { const { to, content } data; const targetSocketId onlineUsers.get(to); if (targetSocketId) { io.to(targetSocketId).emit(new-message, { from: socket.id, content, }); } console.log(消息从 ${socket.id} 发送到 ${to}: ${content}); }); // 用户断开连接 socket.on(disconnect, () { for (const [userId, socketId] of onlineUsers) { if (socketId socket.id) { onlineUsers.delete(userId); console.log(用户 ${userId} 下线); break; } } });});server.listen(3000, () { console.log(Socket.IO 服务器运行在 http://localhost:3000);});## 运行与构建### 开发模式bash# 启动后端服务器node server/index.js# 启动 Vite 开发服务器npm run dev# 启动 Electron需在另一个终端npx electron .### 生产构建bash# 构建 Vue 项目npm run build# 打包 Electron 应用npx electron-builder --win --mac --linux## 总结通过本文的实践我们成功使用 Vite、Electron、Vue 3 和 Socket.IO 构建了一个仿微信桌面端聊天系统。核心要点包括1.Vite 集成 Electron利用 Vite 的快速构建能力结合 Electron 的跨平台特性实现高效开发。2.主进程与渲染进程通信通过预加载脚本和 IPC 机制安全地在主进程和渲染进程之间传递数据。3.实时消息系统使用 Socket.IO 实现 WebSocket 双向通信支持多用户在线聊天。4.仿微信 UI界面设计借鉴微信的布局风格包含联系人列表、聊天窗口和消息输入区域。这个系统可以作为企业内部通讯工具或学习项目的起点。未来可以扩展更多功能如文件传输、表情包、群聊等。希望本文能为你的桌面应用开发提供实用的参考。