我的第一篇源码阅读之fetch-event-source
前言终于遇到一个简单的库来学习它的源码了。这个项目只有2个主要文件，代码加起来不到500行，是真的很mini了。客户端向服务端发起请求用xhr或fetch，客户端与服务端双向通信用websocket，而服务端主动发起请求用sse。chatGPT就是用sse回复提问的。window中有一个叫EventSource的构造函数。一个EventSource实例会对服务器开启一个持久化的连接，以text/event-stream格式发送事件，此连接会一直保持开启直到通过调用EventSource.close()关闭。但使用EventSource时只能把参数加到url后面，而且也不能像fetch请求那样设置header等参数。借助fetch-event-source这个库就可以像发起fetch请求一样发起服务器单向通信请求。 目录结构 入口文件index.ts是入口文件，里面只有2行代码，导出了fetch.ts和parse.ts中部分变量和方法。 12export { fetchEventSource, FetchEventSourceInit,...
用canvas实现一个简单的画板
1.画板的功能 修改画笔颜色； 修改画笔粗细； 橡皮擦； 重置画板； 撤销上一步； 保存成图片； 2.所需知识Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。ctx.moveTo(x, y) 将一个新的子路径的起始点移动到(x，y)坐标ctx.lineTo(x, y) 使用直线连接子路径的终点到x，y坐标 3.一步步实现第一步，实现基本功能，可以画出来鼠标路径；12345678910111213141516171819202122232425262728293031323334353637383940414243444546<canvas id="myCanvas" width="400" height="400"></canvas>class Board { constructor(id) { this.canvas = document.getElementById(id); ...
.png)
element-plus自动按需引入
前言：使用unplugin-vue-components后，可以实现按需引入，而且也不用再使用import引入需要的组件，直接使用<el-button>等组件就可以。 1.安装npm包1npm i unplugin-vue-components unplugin-auto-import -D 2.配置vue.config.js（这里是vuecli配置方法，其他脚手架需要参考文档） 12345678910111213141516const AutoImport = require('unplugin-auto-import/webpack')const Components = require('unplugin-vue-components/webpack')const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports =...
服务端主动推送消息Server-client events(SSE)
前言众所周知，用http可以实现从客户端请求服务端的消息，用websocket可以实现客户端和服务器的双向通信，但用SSE实现服务端主动推送的比较少。SSE相当于http的优点是可以由服务端主动推送消息。SSE相当于websocket的优点是断开连接后可以自动重连。 使用场景 消息统一推送 数据实时更新 代替轮询 使用方法node的话，可以用阮老师的例子node实现SSE python可以参考下面的代码 12345678910111213141516171819202122232425262728from flask import Flask, Responseimport timeimport jsonapp = Flask(__name__)def message_to_send(): time.sleep(5) return json.dumps({"message": "hello"})@app.route("/stream")def stream(): def...
刮刮乐效果原来如此简单
1.刮刮乐（橡皮擦）效果的核心apictx.globalCompositeOperation = type; 设置要在绘制新形状时应用的合成操作的类型。我们这里需要用到的类型是 destination-out此属性的详细信息：MDN文档 2.基础版刮刮乐功能canvs 覆盖在图片上 <style> body { margin: 0; } img { width: 400px; height: 300px; left: 200px; position: absolute; z-index: -1; } canvas { margin-left: 200px; } </style> ...
.png)