当前位置：首页 > news >正文

Vue3+socket.io 项目本地vite配置

news 2025/10/11 6:46:47

进行websocket项目开发时，常用到 socket.io 这个库。

前端使用 vite7 进行 Vue3 项目开发时，下面记录相关内容。

前端项目

# 项目搭建
pnpm create vite# 安装依赖
pnpm add socket.io-client

客户端代码

import { io } from "socket.io-client";const socket = io()export default socket;

vite.config.ts 配置文件

import path from "path"
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vite.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {"@": path.resolve(__dirname, './src'),}},server: {proxy: {// socket代理地址配置'/socket.io': {target: 'http://localhost:3000',ws: true,rewriteWsOrigin: true,},}}
})

后端项目

node.js项目 server.js 相关代码

const Koa = require("koa")
const http = require("http")
const fs = require("fs")
const path = require("path")
const { Server } = require("socket.io")const app = new Koa()
const server = http.createServer(app.callback())
const io = new Server(server)app.use(async (ctx, next) => {const { method, url } = ctxif (method === "GET" && url === "/") {ctx.type = "text/html"ctx.body = fs.createReadStream(path.join(__dirname, "public", "index.html"))} else if (method === "GET" && url.startsWith("/public/")) {const filePath = path.join(__dirname, url)try {ctx.type = url.endsWith(".css") ? "text/css" : url.endsWith(".js") ? "application/javascript" : "text/plain"ctx.body = fs.createReadStream(filePath)} catch (err) {ctx.status = 404}} else {await next()}
})io.on("connection", (socket) => {console.log(`客户端已连接: ${socket.id}`)console.log("a user connected")// 接收客户端发送的消息socket.on("message", (msg) => {console.log("收到消息:", msg)// 广播给所有客户端（包括发送者）io.emit("message", msg)})
})server.listen(3000, () => {console.log("server running at http://localhost:3000")
})

后端项目启动