【Socket】express里使用Socket.io | socket广播

Socket简介

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

  • 用作场景:

    1. 用户A给用户B点赞、评论时 ,用户B收到用户A的点赞、评论通知
    2. 用户在线、离线状态
    3. 聊天、群聊相关等
    • 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/
  1. socket服务端参考
https://socket.io/zh-CN/docs/v4/server-installation/
  1. 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:3001`)

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)

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

你可能感兴趣的:(前端,websocket)