dedecms做视频网站,网站建设面对的问题,宿迁宿豫网站建设,平台网站如何做推广方案网络请求
node编写接口
这里用到的几个包的作用
express#xff1a;基于 Node.js 平台#xff0c;快速、开放、极简的 Web 开发框架#xff0c;官网#xff1a;https://www.expressjs.com.cn/cors#xff1a;用来解决跨域问题body-parser#xff1a;可以通过 req.body…网络请求
node编写接口
这里用到的几个包的作用
express基于 Node.js 平台快速、开放、极简的 Web 开发框架官网https://www.expressjs.com.cn/cors用来解决跨域问题body-parser可以通过 req.body 获取post请求传递过来的json数据multer用于文件上传
const express require(express);
const fs require(fs);
const path require(path)
const app express()
const multer require(multer);
const cors require(cors)
const bodyParser require(body-parser)
app.use(cors())
app.use(bodyParser.json())
// 设置上传目录和文件名
const storage multer.diskStorage({destination: function (req, file, cb) {cb(null, uploads/)},filename: function (req, file, cb) {console.log(file)cb(null, Date.now() path.extname(file.originalname))}
})const upload multer({ storage: storage });app.get(/name,(req,res){res.send({code:200,msg:成功})
})app.post(/add,(req,res){console.log(req.body)// 使用req.body接收前端传递过来的post参数let data req.bodyres.send({code:200,data:data})
})app.post(/upload, upload.single(file), (req, res) {if (!req.file) {return res.status(400).send(No file uploaded.);}// 输出文件信息console.log(Uploaded: req.file.filename);res.send({code:200,data:文件上传成功})
});app.get(/sse, (req, res) {// 声明链接方式是sseres.writeHead(200,{Content-Type:text/event-stream})const text fs.readFileSync(./read.txt,utf8)const arr text.split()let current 0// 设置每隔20毫秒主动发送一次数据let timer setInterval((){if(current arr.length){clearInterval(timer)}else{// 发送消息必须是 data: 开头\n\n 结尾。中间是发送的内容内容必须是一个字符串res.write(data:${arr[current]}\n\n)current}},20)
})app.listen(10086, () {console.log(启动成功 http://localhost:10086)
})Ajax请求
发送GET请求
let xhr new XMLHttpRequest()
function sendGet(){xhr.open(GET,http://127.0.0.1:10086/name)// 当接口相应数据后会触发onload回调xhr.onload function (){if(xhr.status 200){console.log(JSON.parse(xhr.responseText))}}xhr.send()
}发送POST请求
let xhr new XMLHttpRequest()
function sendPost(){xhr.open(POST,http://127.0.0.1:10086/add)xhr.setRequestHeader(Content-Type,application/json)xhr.onload function (){if(xhr.status 200){console.log(JSON.parse(xhr.responseText))}}// 定义发送给后端的数据let data {name:张三,age:18}// 把数据放在send中进行发送需要使用JSON.stringify进行序列化xhr.send(JSON.stringify(data))
}上传文件
var fileEl document.getElementById(file);
fileEl.addEventListener(change,event{let file event.target.files[0]xhr.open(POST,http://127.0.0.1:10086/upload)xhr.onload function (){if(xhr.status 200){console.log(JSON.parse(xhr.responseText))}}let data new FormData()data.append(file,file)xhr.send(data)
})设置超时时间
function sendGet() {xhr.open(GET, http://127.0.0.1:10086/name)xhr.setRequestHeader(Content-Type, application/json)// 设置超时时间1000毫秒xhr.timeout 1000xhr.addEventListener(timeout, function () {console.log(请求超时)})xhr.onload function () {if (xhr.status 200) {console.log(JSON.parse(xhr.responseText))}}xhr.send()
}请求中断
xhr.abort()
// 请求中断回调
xhr.addEventListener(abort,function (){console.log(请求中断)
})监听上传进度
// 监听上传进度
xhr.addEventListener(progress,function (event){console.log(${(event.loaded / event.total * 100).toFixed(2)}%)
})Axios使用
Axios 是对 Ajax 的封装可以帮助我们更好的发送请求官方文档http://www.axios-js.com/zh-cn/docs/
下面是分别发送get和post的示例
script srchttps://unpkg.com/axios/dist/axios.min.js/scriptfunction axiosGet(){axios.get(http://127.0.0.1:10086/name).then(res{console.log(res.data)})
}function axiosPost(){axios.post(http://127.0.0.1:10086/add,{name:张三}).then(res{console.log(res.data)})
}fetch请求
Fetch是一种网络通信协议用于在客户端和服务器之间传输数据。该协议使用HTTP请求和响应进行通信与传统的AJAX方式相比Fetch更加简单易用并提供了许多现代化的功能。
使用Fetch可以方便地向服务器发送请求并将响应返回给客户端。你可以使用Fetch获取文本、JSON、图像和文件等数据并进行各种处理。Fetch还支持流式传输和取消请求等高级功能使得处理大型数据集和长时间运行的操作变得更加简单和可靠。
Fetch API也是Javascript中常用的API之一它提供了一组方法和属性可以在浏览器端与服务器进行通信。通过Fetch API你可以轻松地使用Fetch协议进行数据传输并对请求和响应进行操作和处理。
fetch 对比 xhr
fetch 和 XMLHttpRequestXHR都是前端与服务器进行数据交互的常用方式它们各有优缺点下面是它们的比较
API 设计和使用方式
fetch 的 API 设计更加现代化、简洁和易于使用使用起来更加直观和方便。相比之下XHR 的 API 设计比较繁琐需要进行多个参数的配置和回调函数的处理。
支持的请求方法
fetch API 默认只支持 GET 和 POST 请求方法而 XHR 则支持所有标准的 HTTP 请求方法。
请求头部
在 fetch 中设置请求头部的方式更加清晰和直接可以通过 Headers 对象进行设置而 XHR 的方式相对较为繁琐。
请求体
在发送 POST 请求时fetch API 要求将请求体数据作为参数传递给 fetch 方法中的 options 对象而 XHR 可以直接在 send() 方法中设置请求体数据。
支持的数据类型
在解析响应数据时fetch API 提供了多种方法包括 .json(), .blob(), .arrayBuffer() 等而 XHR 只支持文本和二进制数据两种数据类型。
跨域请求
在进行跨域请求时fetch API 提供了一种简单而强大的解决方案——使用 CORS跨域资源共享头部实现跨域请求而 XHR 则使用了一个叫做 XMLHttpRequest Level 2 的规范在代码编写上相对较为繁琐。
总的来说fetch API 与 XHR 各有优缺点具体选择哪种方式还需要根据具体情况进行考虑。平时开发中使用较多的是 fetch 因为它使用方便、API 简洁、语法清晰同时也支持了大多数常用的功能可以有效地简化前端开发流程。
fetch 返回格式
text(): 将响应体解析为纯文本字符串并返回。json(): 将响应体解析为JSON格式并返回一个JavaScript对象。blob(): 将响应体解析为二进制数据并返回一个Blob对象。arrayBuffer(): 将响应体解析为二进制数据并返回一个ArrayBuffer对象。formData(): 将响应体解析为FormData对象。
发送GET请求
function fetchGet() {fetch(http://localhost:10086/name).then(res res.json()).then(res {console.log(res)})
}发送POST请求
function fetchPost() {fetch(http://localhost:10086/add, {method: post,headers:{Content-Type:application/json},body: JSON.stringify({name: 张三,age: 18})}).then(res res.json()).then(res {console.log(res)})
}终止请求
需要使用 AbortController 构造器
button onclickfetchGet()get请求/button
button onclickstop()终止请求/button发送请求
const abort new AbortController()
function fetchGet() {fetch(http://localhost:10086/name,{signal:abort.signal}).then(res res.json()).then(res {console.log(res)})
}调用终止方法
function stop(){abort.abort()
}请求超时
fetch 本身没有超时定义需要我们自己封装一个计时器到时间后调用 abort.abort() 方法
const abort new AbortController()
function fetchGet() {setTimeOutFn()fetch(http://localhost:10086/name,{signal:abort.signal}).then(res res.json()).then(res {console.log(res)})
}function setTimeOutFn(time 2000){setTimeout((){abort.abort()},time)
}SSE
概述
SSEServer-Sent Events是一种用于实现服务器主动向客户端推送数据的技术也被称为“事件流”Event Stream。它基于 HTTP 协议利用了其长连接特性在客户端与服务器之间建立一条持久化连接并通过这条连接实现服务器向客户端的实时数据推送。
SSE 和 Socket 区别
SSEServer-Sent Events和 WebSocket 都是实现服务器向客户端实时推送数据的技术但它们在某些方面还是有一定的区别。
技术实现
SSE 基于 HTTP 协议利用了其长连接特性通过浏览器向服务器发送一个 HTTP 请求建立一条持久化的连接。而 WebSocket 则是通过特殊的升级协议HTTP/1.1 Upgrade 或者 HTTP/2建立新的 TCP 连接与传统 HTTP 连接不同。
数据格式
SSE 可以传输文本和二进制格式的数据但只支持单向数据流即只能由服务器向客户端推送数据。WebSocket 支持双向数据流客户端和服务器可以互相发送消息并且没有消息大小限制。
连接状态
SSE 的连接状态仅有三种已连接、连接中、已断开。连接状态是由浏览器自动维护的客户端无法手动关闭或重新打开连接。而 WebSocket 连接的状态更灵活可以手动打开、关闭、重连等。
兼容性
SSE 是标准的 Web API可以在大部分现代浏览器和移动设备上使用。但如果需要兼容老版本的浏览器如 IE6/7/8则需要使用 polyfill 库进行兼容。而 WebSocket 在一些老版本 Android 手机上可能存在兼容性问题需要使用一些特殊的 API 进行处理。
安全性
SSE 的实现比较简单都是基于 HTTP 协议的与普通的 Web 应用没有太大差异因此风险相对较低。WebSocket 则需要通过额外的安全措施如 SSL/TLS 加密来确保数据传输的安全性避免被窃听和篡改否则可能会带来安全隐患。
总体来说SSE 和 WebSocket 都有各自的优缺点适用于不同的场景和需求。如果只需要服务器向客户端单向推送数据并且应用在前端的浏览器环境中则 SSE 是一个更加轻量级、易于实现和维护的选择。而如果需要双向传输数据、支持自定义协议、或者在更加复杂的网络环境中应用则 WebSocket 可能更加适合。
适用于场景
chatGPT 返回的数据 就是使用的SSE 技术
实时数据大屏 如果只是需要展示 实时的数据可以使用SSE技术 而不是非要使用webSocket
使用
调用node端写好的 sse 接口这个接口会每隔20毫秒主动向前端发送一次数据
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
style.content{width: 400px;height: 400px;border: 1px solid #ddd;}
/style
bodydiv classcontent idmessage/divbutton onclickstart()开始/buttonbutton onclickclose()关闭/button
/body
scriptlet sse nullfunction start(){sse new EventSource(http://localhost:10086/ssh)// 链接成功回调sse.onopen (){console.log(open)}// 监听消息sse.onmessage (event){console.log(event)// 默认监听message这个可以定义// 默认数据也是在event的data属性中返回document.getElementById(message).innerHTML event.data}// 链接失败回调sse.onerror (){console.log(onerror)}}function close(){console.log(关闭)sse.close()}
/script
/htmlWebSocket
WebSocket是双向通信客户端可以随时向服务端发送消息反过来服务端也可以随时向客户端发送消息
双向通信
使用node定义接口
安装
npm install ws编写接口
const ws require(ws)// 创建服务
const wss new ws.Server({port:8888},(){console.log(socket服务启动成功)
})// 监听链接成功提示
wss.on(connection,(socket){console.log(客户端链接成功)socket.on(message,e{// 通过e.toString()获取前端传递过来的东西socket.send(我是服务器我收到你的消息了内容是 e.toString())})
})调用
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
input typetext idmsg/
button onclicksend()发送/button
ul idul/ul
/body
scriptlet msg document.querySelector(#msg)let ul document.querySelector(#ul)// 链接let wss new WebSocket(ws://localhost:8888)// 监听消息wss.addEventListener(message, e {console.log(e.data)let li document.createElement(li)li.innerText e.dataul.appendChild(li)})function send() {// 发送消息wss.send(msg.value)msg.value }
/script
/html消息广播
默认一个链接只会收到自己与服务器之间的消息不能收到其他链接接收的消息我们通过如下方式来实现
// 监听链接成功提示
wss.on(connection,(socket){console.log(客户端链接成功)socket.on(message,e{// 广播消息 wss.clients 存放了所有链接信息遍历这个链接信息给所有链接者发送消息wss.clients.forEach(client{// 通过e.toString()获取前端传递过来的东西client.send(我是服务器我收到你的消息了内容是 e.toString())})})
})心跳检测
在长时间没有发送消息交互或者网络不好的情况下websocket 会出现断掉的情况我们可以通过心跳检测的机制定时发送一次消息实现链接保活
const ws require(ws)// 创建服务
const wss new ws.Server({port: 8888}, () {console.log(socket服务启动成功)
})// 消息类型
const STATE {HEART:1,MESSAGE:2
}// 监听链接成功提示
wss.on(connection, (socket) {console.log(客户端链接成功)socket.on(message, e {// 广播消息wss.clients.forEach(client {// 通过e.toString()获取前端传递过来的东西client.send(JSON.stringify({type:STATE.MESSAGE,data:我是服务器我收到你的消息了内容是 e.toString()}))})})// 添加心跳检测let headInterval nulllet headCheck () {if(socket.readyState ws.OPEN){socket.send(JSON.stringify({type:STATE.HEART,data:我是心跳包}))}else{clearInterval(headInterval)}}// 每隔500毫秒检测一次setInterval(headCheck,500)
})同时前端需要区分不同的消息类型
// 监听消息
wss.addEventListener(message, e {let li document.createElement(li)let data JSON.parse(e.data)if(data.type 2){li.innerText data.dataul.appendChild(li)}
})navigator.sendBeacon
使用 navigator.sendBeacon 实现高效的数据上报
在 web 开发中我们经常需要将用户行为或性能数据上报到服务器。为了不影响用户体验开发者通常会在页面卸载时进行数据上报。然而传统的数据上报方式如 XMLHttpRequest 或 Fetch API容易受到页面卸载过程中的阻塞导致数据丢失。为了解决这个问题navigator.sendBeacon API 被引入它可以在页面卸载时安全、可靠地发送数据。
navigator.sendBeacon 对比 Ajax fetch
优点
不受页面卸载过程的影响确保数据可靠发送。异步执行不阻塞页面关闭或跳转。能够发送跨域请求。
缺点
fetch 和 ajax 都可以发送任意请求 而 sendBeacon 只能发送POSTfetch 和 ajax 可以传输任意字节数据 而 sendBeacon 只能传送少量数据64KB 以内fetch 和 ajax 可以定义任意请求头 而 sendBeacon 无法自定义请求头sendBeacon 只能传输 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据如果处于危险的网络环境或者开启了广告屏蔽插件 此请求将无效
navigator.sendBeacon 应用场景
发送心跳包可以使用 navigator.sendBeacon 发送心跳包以保持与服务器的长连接避免因为长时间没有网络请求而导致连接被关闭。埋点可以使用 navigator.sendBeacon 在页面关闭或卸载时记录用户在线时间pv uv以及错误日志上报 按钮点击次数。发送用户反馈可以使用 navigator.sendBeacon 发送用户反馈信息如用户意见、bug 报告等以便进行产品优化和改进
其他注意事项 type
ping请求 是html5 新增的 并且是sendBeacon 特有的 ping 请求 只能携带少量数据并且不需要等待服务端响应因此非常适合做埋点统计以及日志统计相关功能。
使用方法
编写一个接口
const multer require(multer);app.post(/ping,multer().none(),(req,res){console.log(req.body.data)res.send(ok)
})前端发送 navigation.sendBeacon 请求
function send() {let data new FormData()data.append(data, JSON.stringify({name: 张三,age: 1}))navigator.sendBeacon(http://localhost:10086/ping, data)
}后端接收到文件 浏览器相应数据 JWT鉴权
首先安装相关依赖
npm install jsonwebtoken express corsjsonwebtoken用于生成token和验证tokencors处理跨域问题
接口编写
const express require(express)
const cors require(cors)
const jwt require(jsonwebtoken)
const app express()// 处理跨域问题
app.use(cors())
// 可以使用 req.body 获取post请求传递的json数据
app.use(express.json())
// token加盐
const KEY 123456// 白名单包含不需要验证token的路径
const whitelist [/login];
// 验证token的中间件
app.use((req, res, next) {// 检查路径是否在白名单中if (whitelist.includes(req.path)) {console.log(3333)// 在白名单中直接进入下一个中间件或请求处理函数next();} else {// 不在白名单中需要验证tokenconst token req.headers[authorization];jwt.verify(token, KEY, (err, decode) {if(err){res.status(401).send(无效的token)}else{next()}})}
});// 登录接口
app.post(/login, (req, res) {let data req.bodyconsole.log(data)if(data.name admin data.pwd 123456){res.send({id:1,// 生成token,第一个参数是token携带的内容第二是KEY第三个是过期时间token:jwt.sign({id:1,name:data.name}, KEY, {expiresIn: 1h})})}else{res.send({code:500,msg:用户名或密码错误})}
})// 获取集合信息
app.get(/list,(req,res){res.send([{name:lisi,age:1},{name:wangwu,age:2},])
})app.listen(3000, () {console.log(服务启动成功http://localhost:3000)
})前端调用
前端在发送请求时需要在请求头中携带token
login.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://unpkg.com/axios/dist/axios.min.js/script
/head
body
div用户名: input placeholder用户名 idname/密码: input placeholder密码 idpwd/button onclicklogin()登录/button
/div
scriptfunction login() {let name document.getElementById(name).value;let pwd document.getElementById(pwd).value;axios.post(http://localhost:3000/login,{name,pwd}).then(res{if(res.data.token){alert(登录成功)localStorage.setItem(token,res.data.token)location.href ./list.html}else{alert(登录失败)localStorage.removeItem(token)}})}
/script
/body
/htmllist.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://unpkg.com/axios/dist/axios.min.js/script
/head
body
button onclicklist()获取list/button
/body
scriptfunction list(){axios.get(http://localhost:3000/list,{headers: {authorization: localStorage.getItem(token),}}).then(res{console.log(res.data)})}
/script
/html判断网络状态
获取是否联网
// 是否联网,返回true或者falsetrue表示已经联网false表示没有联网
console.log(navigator.onLine)获取网络环境
前端还可以判断用户当前所在网络的好坏
// 获取网络环境
console.log(navigator.connection)返回的是一个 NetworkInformation 对象 XSS跨站脚本攻击
随着互联网的快速普及越来越多的敏感信息被存储在网络上例如个人身份信息、财务信息等。在当前数字化时代这些安全问题变得更加突出。作为开发者我们必须采取适当的防范措施以确保用户数据的安全性。本文将着重探讨跨站脚本攻击Cross-site scriptingXSS这一常见的网络攻击方式包括其定义、原理、危害、分类和防范措施以帮助大家更好地预防此类安全风险。
概述
**定义**跨站点脚本攻击简称XSS是指攻击者利用网站存在的漏洞通过在网站中注入恶意脚本代码从而使得用户在访问该网站时受到攻击。这些恶意脚本代码通常是JavaScript 代码它们可以窃取用户的敏感信息如用户名、密码等并将这些信息发送到攻击者的服务器。
原理
XSS攻击的本质是利用Web应用程序中的漏洞向网页注入恶意脚本代码然后将这些代码嵌入到网页中当其他用户访问这个网页时恶意脚本将会被执行。
攻击者通常会在Web应用程序的输入框、评论框、搜索框等可输入内容的地方输入特定的脚本代码这些代码可以被Web应用程序直接插入到网页中导致网页上的所有用户都会受到攻击。
XSS攻击的原理包括以下几个步骤
1、攻击者在Web应用程序的输入框、评论框等可输入内容的地方输入包含script标签的恶意脚本代码例如
script
// 在这里插入恶意脚本代码
/script2、Web应用程序将恶意脚本代码保存到数据库中或直接将其插入到网页的HTML代码中。
3、当其他用户访问这个网页时浏览器会执行其中的恶意脚本代码。恶意脚本可以窃取用户的敏感信息如登录凭证、浏览器历史记录、Cookie等或者通过控制用户的浏览器来进行更多的攻击。
例如以下是一段可以窃取用户Cookie的恶意脚本代码
script
let cookieValue document.cookie;
// 将cookieValue发送到攻击者的服务器
/script4、攻击者获取到用户的敏感信息后可以进行更进一步的攻击例如重定向到恶意网站、发起钓鱼攻击等。
预防工具
使用第三方库来预防这里使用 xss官网文档https://www.npmjs.com/package/xss
script srchttps://rawgit.com/leizongmin/js-xss/master/dist/xss.js/script
script// apply function filterXSS in the same wayvar html filterXSS(scriptalert(xss);/scr ipt);alert(html);
/script
