websocket操作入门

基本介绍：WebSocket 是一种在单个 TCP 连接上进行全双工通信的网络协议，实现了浏览器与服务器之间的持久性实时通信。（我认为来看这篇文章的读者，应该是有基本了解的，所以这些概念就简略说一下）

我的代码在文章最后

一、导入

1.1 客户端引入

默认情况下，Socket.IO 服务器在处公开一个客户端包

javascript 复制代码

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
</script>

如果不是的话：

javascript 复制代码

npm install socket.io-client    //根据你的包来选择
yarn add socket.io-client

1.2 服务端导入

javascript 复制代码

npm install socket.io    //根据你的包来选择
yarn add socket.io

二、初始化

2.1客户端

2.1.1同一域

javascript 复制代码

const socket = io();

2.1.2不同域

javascript 复制代码

const socket = io("https://server-domain.com");

2.2服务端

2.2.1 独立服务器

这种方式下，Socket.IO 会自己创建并管理一个 HTTP 服务器，并将其升级为 WebSocket 服务。它不依赖于任何现有的 HTTP 服务器。

javascript 复制代码

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 创建的。

javascript 复制代码

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);

例子：

javascript 复制代码

//导入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发送

javascript 复制代码

// 发送简单消息
socket.emit('chat message', '你好服务器');

// 发送对象消息
socket.emit('user message', {
  text: 'Hello',
  userId: '123',
  timestamp: new Date()
});

3.1.2接收

javascript 复制代码

// 接收服务端消息
socket.on('server message', (data) => {
  console.log('收到服务端消息:', data);
});

// 接收广播消息
socket.on('broadcast', (data) => {
  console.log('收到广播:', data);
});

3.2服务器代码

3.1.1发送

javascript 复制代码

// 发送给当前客户端
socket.emit('server message', '单独回复');

// 广播给所有客户端
io.emit('broadcast', '全体消息');

// 发送给除当前客户端外的所有人
socket.broadcast.emit('notification', '新用户加入');

3.1.2接收

javascript 复制代码

io.on('connection', (socket) => {
  // 接收客户端消息
  socket.on('client message', (data) => {
    console.log('收到客户端消息:', data);
  });
});

其实这个挺好记的，一般.on就是监听（接收），而.emit就是发送

四、实例

事先说明：我是把服务器和客户端分开的，可以理解为分别独立创建两个文件夹
所以在服务器和客户端要分别安装socket.io。

4.1客户端

html 复制代码

<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=msg
    list.appendChild(li)

  })
},
methods:{
  submitHandle(){
    //向服务端发送消息
  this.socket.emit('chat',this.massage)
  }
}
}
</script>

4.2服务器

javascript 复制代码

//导入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)

效果：