🏠️ 博客主页

SSE

SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP 协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。

SSE 和 Socket 区别

SSE 基于 HTTP 协议，利用了其长连接特性，通过浏览器向服务器发送一个 HTTP 请求，建立一条持久化的连接。而 WebSocket 则是通过特殊的升级协议（HTTP/1.1 Upgrade 或者 HTTP/2）建立新的 TCP 连接，与传统 HTTP 连接不同。
SSE 可以传输文本和二进制格式的数据，但只支持单向数据流，即只能由服务器向客户端推送数据。WebSocket 支持双向数据流，客户端和服务器可以互相发送消息，并且没有消息大小限制。
SSE 的连接状态仅有三种：已连接、连接中、已断开。连接状态是由浏览器自动维护的，客户端无法手动关闭或重新打开连接。而 WebSocket 连接的状态更灵活，可以手动打开、关闭、重连等。
SSE 的实现比较简单，都是基于 HTTP 协议的，与普通的 Web 应用没有太大差异，因此风险相对较低。WebSocket 则需要通过额外的安全措施（如 SSL/TLS 加密）来确保数据传输的安全性，避免被窃听和篡改，否则可能会带来安全隐患。
适用场景，GPT,数据大屏可以使用 SSE, 语音转写, 聊天室

Node 依赖包

node-schedule

node-schedule 是一个定时任务的模块，可以用来执行定时任务。

使用场景

后台任务，定时任务可用于自动执行后台任务，如数据备份、日志清理、缓存刷新等。通过设定适当的时间点或时间间隔，可以确保这些任务按计划进行，而无需手动干预。
定期操作，定时任务可用于执行定期操作，如发送电子邮件提醒、生成报告、更新数据等。通过设定适当的时间点，可以自动触发这些操作，提高效率并减少人工操作的需求。
调度任务和工作流，定时任务可以用于调度和协调复杂的任务和工作流程。

项目部署通知用户

纯前端实现

打完包之后生成的 script src 的 hash 值去判断，每次打包都会生成唯一的 hash 值，轮询判断

interface Options {
    timer?: number
}

export class Updater {
    oldScript: string[] //存储第一次值也就是script 的hash 信息
    newScript: string[] //获取新的值 也就是新的script 的hash信息
    dispatch: Record<string, Function[]> //小型发布订阅通知用户更新了
    constructor(options: Options) {
        this.oldScript = [];
        this.newScript = []
        this.dispatch = {}
        this.init() //初始化
        this.timing(options?.timer)//轮询
    }


    async init() {
        const html: string = await this.getHtml()
        this.oldScript = this.parserScript(html)
    }

    async getHtml() {
        const html = await fetch('/').then(res => res.text());//读取index html
        return html
    }

    parserScript(html: string) {
        const reg = new RegExp(/<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/ig) //script正则
        return html.match(reg) as string[] //匹配script标签
    }

    //发布订阅通知
    on(key: 'no-update' | 'update', fn: Function) {
        (this.dispatch[key] || (this.dispatch[key] = [])).push(fn)
        return this;
    }

    compare(oldArr: string[], newArr: string[]) {
        const base = oldArr.length
        const arr = Array.from(new Set(oldArr.concat(newArr)))
        //如果新旧length 一样无更新
        if (arr.length === base) {
            this.dispatch['no-update'].forEach(fn => {
                fn()
            })

        } else {
            //否则通知更新
            this.dispatch['update'].forEach(fn => {
                fn()
            })
        }
    }

    timing(time = 10000) {
         //轮询
        setInterval(async () => {
            const newHtml = await this.getHtml()
            this.newScript = this.parserScript(newHtml)
            this.compare(this.oldScript, this.newScript)
        }, time)
    }

}

//实例化该类
const up = new Updater({
    timer:2000
})
//未更新通知
up.on('no-update',()=>{
   console.log('未更新')
})
//更新通知
up.on('update',()=>{
    console.log('更新了')
})

豆豆和狗蛋儿

瀑布流

布局和实现逻辑

瀑布流

首选确定列数, 列数和屏幕宽度有关
维护一个数组（长度为列数），第一行依次排列（各列放入数组中），第二列选择第一行中高度最小的列，并将第二行的高度加入对应列，以此类推

<template>
    <div class="fs-waterfall-container" ref="containerRef">
        <div class="fs-waterfall-list">
            <div
                class="fs-waterfall-item"
                v-for="(item, index) in state.cardList"
                :key="item.id"
                :style="{
          width: `${state.cardPos[index].width}px`,
          height: `${state.cardPos[index].height}px`,
          transform: `translate3d(${state.cardPos[index].x}px, ${state.cardPos[index].y}px, 0)`,
        }"
            >
                <slot name="item" :item="item" :index="index"></slot>
            </div>
        </div>
    </div>
</template>

走,出去玩

WebRTC 使用

WebRTC

WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接
WebRTC 可以实现视频流和（或）音频流或者其他任意数据的传输。
WebRTC 包含的这些标准可以使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议。
WebRTC 只能在 HTTPS 协议或者 localhost 下使用，如果是 HTTP 协议，会报错。
引入 adpater.js 来适配各浏览器

媒体流

1. navigator.mediaDevices.getUserMedia(constraints)

通过这个 API 可以获取媒体流权限，方法的参数是一个配置对象，可以配置媒体流类型以及分辨率等信息。可以通过navigator.mediaDevices.getSupportedConstraints() 获取 constraints 参数中具体支持的配置项
浏览器要获取摄像头权限需要开启本地端口或者 https 服务

Python 库

xlwt 库

excel 文件写入

import xlwt
# 创建一个workbook 设置编码
workbook = xlwt.Workbook(encoding = 'utf-8') #print(workbook) %结果%<xlwt.Workbook.Workbook object at 0x005F4630>
# 创建一个worksheet
worksheet = workbook.add_sheet('创建的sheet')

# 写入excel
# 参数对应 行, 列, 值
worksheet.write(1,0, label = '第二行第一列')

# 保存
workbook.save('学习笔记.xls') #运行后 会在当前目录生成一个“学习笔记.xls”

PDF

⭐️⭐️

SSE 和 Socket 区别

node-schedule

使用场景

纯前端实现

布局和实现逻辑

WebRTC

1. navigator.mediaDevices.getUserMedia(constraints)

xlwt 库

excel 文件写入