当前位置：首页 > Web开发 > 正文

在发起进行下一次 - clientbodydiv id=clock/divscriptsetInterval(func

2024-03-31 Web开发

半双工: 同一个时刻,只能单向传数据(request/response).

处事器不能主动给客户端推动静

技术图片

轮询(polling)
不停的成立http连接，严重浪费了处事器端和客户真个资源. 人越多,处事器压力越大.

- server.js let express = require('express'); let app = express(); app.use(express.static(__dirname)); app.get("/clock", function (req, res) { res.end(new Date().toLocaleTimeString()); }); app.listen(8080); - client <body> <div id="clock"></div> <script> setInterval(function () { let xhr = new XMLHttpRequest(); xhr.open('GET', ':8080/clock', true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { document.querySelector('#clock').innerHTML = xhr.responseText; } }; xhr.send(); }, 1000); </script> </body> - 访谒:8080/clock

长轮询(long polling)(comet)
当一次请求完成后, 在倡议进行下一次

技术图片

- client <body> <div id="clock"></div> <script> setInterval(function () { let xhr = new XMLHttpRequest(); xhr.open('GET', ':8080/clock', true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { document.querySelector('#clock').innerHTML = xhr.responseText; } }; xhr.send(); }, 1000); </script> </body> - server.js let express = require('express'); let app = express(); app.use(express.static(__dirname)); app.get("/clock", function (req, res) { //优化: 其时间为每隔5的倍数才返回. let $timer = setInterval(function () { let date = new Date(); let seconds = date.getSeconds(); if (seconds % 5 === 0) { res.end(new Date().toLocaleTimeString()); clearInterval($timer) } }, 1000); }); app.listen(8080);

iframe流
打开浏览器会主动请求iframe页
iframe可以挪用parent父类的要领
错误谬误: server不停开连接.浏览器一直转圈.

- server.js const express = require('express'); const app = express(); app.use(express.static(__dirname)); app.get('/clock', function (req, res) { res.header("Content-Type", "text/html"); setInterval(function () { res.write(` <script type="text/javascript"> parent.setTime("${new Date().toLocaleTimeString()}"); </script> `); }, 1000); }); app.listen(8080); - client <body> <div id="clock"></div> <iframe src=http://www.mamicode.com/"/clock" style="display:none"></iframe> <script> function setTime(ts) { document.querySelector('#clock').innerHTML = ts; } </script> </body>

长连接（SSE）

SSE的简单模型是：一个客户端去从处事器端订阅一条流，之后处事端可以发送动静给客户端直随处事端或者客户端封锁该“流”，，所以eventsource也叫作"server-sent-event` MIME格局为text/event-stream 必需编码成utf-8的格局动静的每个字段使用"\n"来做支解,最后用\n\n暗示结束常用的动静key Event: 事件类型,动静名称要和前端对应,如界说的event: xxx, 则前端可以用onxxx对应 Data: 发送的数据 ID: 每一条事件流的ID 不撑持跨域 - server let express = require('express'); let app = express(); app.use(express.static(__dirname)); let sendCount = 1; app.get('/eventSource', function (req, res) { res.header('Content-Type', 'text/event-stream',); setInterval(() => { res.write(`id:${sendCount++}\nevent:message\ndata:${new Date().toLocaleTimeString()}\n\n`); }, 1000) }); app.listen(8080); - client <body> <div id="clock"></div> <script> var eventSource = new EventSource('/eventSource'); eventSource.onmessage = function (e) { document.querySelector('#clock').innerHTML =e.data }; eventSource.onerror = function (err) { console.log(err); } </script> </body>

WebSocket

- server.js const path = require('path'); let app = express(); let server = require('http').createServer(app); app.get('/', function (req, res) { res.sendFile(path.resolve(__dirname, 'index.html')); }); app.listen(3000); //----------------------------------------------- let WebSocketServer = require('ws').Server; let wsServer = new WebSocketServer({ port: 8888 }); wsServer.on('connection', function (socket) { console.log('连接告成'); socket.on('message', function (message) { console.log('接收到客户端动静:' + message); socket.send('处事器回应:' + message); }); }); - client <script> let ws = new WebSocket('ws://localhost:8888'); ws.onopen = function () { console.log('客户端连接告成'); ws.send('hello'); } ws.onmessage = function (event) { console.log('收随处事器的响应 ' + event.data); } </script>

[go]websocket

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31409.html

在发起进行下一次 - clientbodydiv id=clock/divscriptsetInterval(func

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢