websocket操作入门
基本介绍：WebSocket 是一种在单个 TCP 连接上进行全双工通信的网络协议，实现了浏览器与服务器之间的持久性实时通信。（我认为来看这篇文章的读者，应该是有基本了解的，所以这些概念就简略说一下）
我的代码在文章最后
一、导入
1.1 客户端引入
默认情况下，Socket.IO 服务器在 处公开一个客户端包
<script src="/socket.io/socket.io.js"></script>
<script>const socket = io();
</script>如果不是的话：
npm install socket.io-client //根据你的包来选择
yarn add socket.io-client
1.2 服务端导入
npm install socket.io //根据你的包来选择
yarn add socket.io二、初始化
2.1客户端
2.1.1同一域
const socket = io();2.1.2不同域
const socket = io("https://server-domain.com");2.2服务端
2.2.1 独立服务器
这种方式下，Socket.IO 会自己创建并管理一个 HTTP 服务器，并将其升级为 WebSocket 服务。它不依赖于任何现有的 HTTP 服务器。
const { Server } = require("socket.io");const io = new Server(3000, { /* options */ }); // Socket.IO 自己创建并监听 3000 端口io.on("connection", (socket) => {// ...
});2.2.2 依附于现有 HTTP 服务器
这种方式是将 Socket.IO 实例绑定到一个你已经创建好的 HTTP 服务器上。这个 HTTP 服务器可能是由 Express.js、Koa、Next.js 或是原生 Node.js http.createServer 创建的。
const { createServer } = require("http");
const { Server } = require("socket.io");const httpServer = createServer();
const io = new Server(httpServer, { /* options */ });io.on("connection", (socket) => {// ...
});httpServer.listen(3000);例子：
//导入http模块，用于创建http服务器
const http=require('http') //从 socket.io 库中解构出 Server 类
const {Server}=require('socket.io')//导入 Express 框架，用于创建 Web 应用和路由
const express=require('express')//// 创建 Express 应用实例，用于定义路由、中间件等
const app=express()// 使用 http.createServer() 方法创建一个 HTTP 服务器
// 并将 Express 应用作为请求处理器传入
// 这样 HTTP 服务器就能处理 Express 定义的所有路由和中间件
const server=http.createServer(app)// 初始化socket.io服务器，允许跨域
const io = new Server(server, {cors: { origin: "http://localhost:5173", // Vue开发服务器端口(前端地址)methods: ['GET', 'POST']}}
);server.listen(3000) //服务端三、具体介绍
3.1客户端
3.1.1发送
// 发送简单消息
socket.emit('chat message', '你好服务器');// 发送对象消息
socket.emit('user message', {text: 'Hello',userId: '123',timestamp: new Date()
});3.1.2接收
// 接收服务端消息
socket.on('server message', (data) => {console.log('收到服务端消息:', data);
});// 接收广播消息
socket.on('broadcast', (data) => {console.log('收到广播:', data);
});3.2服务器代码
3.1.1发送
// 发送给当前客户端
socket.emit('server message', '单独回复');// 广播给所有客户端
io.emit('broadcast', '全体消息');// 发送给除当前客户端外的所有人
socket.broadcast.emit('notification', '新用户加入');3.1.2接收
io.on('connection', (socket) => {// 接收客户端消息socket.on('client message', (data) => {console.log('收到客户端消息:', data);});
});其实这个挺好记的，一般.on就是监听（接收），而.emit就是发送
四、实例
事先说明：我是把服务器和客户端分开的，可以理解为分别独立创建两个文件夹
所以在服务器和客户端要分别安装socket.io。
4.1客户端
<template><input type="text" v-model="massage"><button @click="submitHandle">提交</button><br><ul ref="list"></ul></template><script>
import { io } from 'socket.io-client'
export default{data(){return{massage:'',socket:io('http://localhost:3000',{transports: ['websocket', 'polling'], // 明确指定传输方式timeout: 10000 // 设置超时时间})}},mounted(){// 连接到服务器
// const socket = io('http://localhost:3000',{
// transports: ['websocket', 'polling'], // 明确指定传输方式
// timeout: 10000 // 设置超时时间
// });// 监听连接事件
this.socket.on('connect', () => {console.log('连接成功，ID:', this.socket.id);});//监听断开连接事件
this.socket.on('disconnect', () => {console.log('连接断开');});//接收服务端的信息
this.socket.on('responed',(msg)=>{var list=this.$refs.list//创建一个标签，并设置一个内容var li=document.createElement('li')li.textContent=msglist.appendChild(li)})
},
methods:{submitHandle(){//向服务端发送消息this.socket.emit('chat',this.massage)}
}
}
</script>4.2服务器
//导入http模块，用于创建http服务器
const http=require('http') //从 socket.io 库中解构出 Server 类
const {Server}=require('socket.io')//导入 Express 框架，用于创建 Web 应用和路由
const express=require('express')//// 创建 Express 应用实例，用于定义路由、中间件等
const app=express()// 使用 http.createServer() 方法创建一个 HTTP 服务器
// 并将 Express 应用作为请求处理器传入
// 这样 HTTP 服务器就能处理 Express 定义的所有路由和中间件
const server=http.createServer(app)// 初始化socket.io服务器，允许跨域
const io = new Server(server, {cors: { origin: "http://localhost:5173", // Vue开发服务器端口(前端地址)methods: ['GET', 'POST']}}
);//当客户端成功连接到服务器时，触发 connection 事件
io.on('connection',(socket)=>{//向所有客户端发送消息//io.emit('hello','欢迎')//接收客户端发送的消息socket.on('chat',(data)=>{//将接收的消息，发送到除了当前客户端的其它客户socket.broadcast.emit('responed',data)})
})server.listen(3000)效果：
