Socket简介

• 后端、前端实时推送、发送消息

• 用作场景：

  1. 用户A给用户B点赞、评论时 ，用户B收到用户A的点赞、评论通知
  2. 用户在线、离线状态
  3. 聊天、群聊相关等
  4. …
  • socket官方 - https://socket.io/zh-CN
  • npm - https://www.npmjs.com/package/socket.io

socket.io vs websocket

• websocket是HTML的一个标准
  • MDN参考 → https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
• socket是一个第三方库，websocket做到的socket也能做
  ↓
• socket与websocket都是做客户端、服务端实时响应业务的
  ↓
• webscoket 存在兼容问题，若浏览器不支持websocke就前功尽弃
• socket支持更多浏览器，特别是一些低版本浏览器。

小结： 遇到服务端、客户端实时响应业务时，选socket.io相对靠谱

socket下载

npm i socket.io

socket要点

1. socket事件参考

 https://socket.io/zh-CN/docs/v4/emitting-events/

2. socket服务端参考

https://socket.io/zh-CN/docs/v4/server-installation/

3. socket客户端端参考

https://socket.io/zh-CN/docs/v4/client-installation/

基本使用（vue）

前端

src/views/HomeView.vue

<template>
	{{ msg }}
</template>
<script  setup>
import { io } from "socket.io-client"
import { ref} from "vue" 
// 若前后端不存在跨域，io里的参数可以省略
// const socket = io()

// 前后端存在跨域，将后端地址写上
const socket = io(`http://127.0.0.1:30001`)

const msg = ref()
// 连接成功
socket.on("connect", () => {
  // 监听后端的news
  socket.on('news', msg => {
  	msg.value = msg 
    console.log(msg)
  })
})
// 失去连接
socket.on("disconnect", () => {
  console.log('-------------')
})
</script> 

后端

import { createServer } from 'http'
import { Server } from "socket.io"
import express from 'express'
const app = express()

//  重点 ——> 创建服务
const httpServer = createServer(app)
const io = new Server(httpServer, {
    // 允许跨域
    cors: {
        origin: "*"
    }
})

// 连接
io.on("connection", (socket) => {
    // 向客户端发送news
    socket.emit('news', { news: '你好！' });
})

// 重点 ——> 不能使app.listen监听端口，而是使用创建的httpServer监听
httpServer.listen('127.0.0.1', 3001)

注意： 该文仅为个人理解、白话释义，请以官网释义为准。