一、数据同步推送
a. 轻量级:SSE(Server-sent Events)
视频参考:《【IT老齐237】超好用Web服务端主动推送技术SSE》
文档:《SSE技术详解:使用 HTTP 做服务端数据推送应用的技术》
实际演示如:
ithome软媒的服务端推送:
https://www.ithome.com/news/n...
服务端
'use strict'; const http = require('http'); http.createServer((req, res) => { // 服务器声明接下来发送的是事件流 res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', 'Access-Control-Allow-Origin': '*', }); // 发送消息 setInterval(() => { res.write('event: slide\n'); // 事件类型 res.write(`id: ${+new Date()}\n`); // 消息 ID res.write('data: 7\n'); // 消息数据 res.write('retry: 10000\n'); // 重连时间 res.write('\n\n'); // 消息结束 }, 3000); // 发送注释保持长连接 setInterval(() => { res.write(': \n\n'); }, 12000); }).listen(2000);
客户端
if (window.EventSource) { // 创建 EventSource 对象连接服务器 const source = new EventSource('http://localhost:2000'); // 连接成功后会触发 open 事件 source.addEventListener('open', () => { console.log('Connected'); }, false); // 服务器发送信息到客户端时,如果没有 event 字段,默认会触发 message 事件 source.addEventListener('message', e => { console.log(`data: ${e.data}`); }, false); // 自定义 EventHandler,在收到 event 字段为 slide 的消息时触发 source.addEventListener('slide', e => { console.log(`data: ${e.data}`); // => data: 7 }, false); // 连接异常时会触发 error 事件并自动重连 source.addEventListener('error', e => { if (e.target.readyState === EventSource.CLOSED) { console.log('Disconnected'); } else if (e.target.readyState === EventSource.CONNECTING) { console.log('Connecting...'); } }, false); } else { console.error('Your browser doesn\'t support SSE'); }
要点:服务端发送流数据 'Content-Type': 'text/event-stream';客户端new EventSource、source.addEventListener('message', e=>{})
优点是相当于普通api接口的调用
b. 双向交互:websocket
视频参考:《【IT老齐238】十分钟上手WebSocket全双工通信协议》
后端需要单独建立一个ws监听服务端口
二、uniCloud云开发
特点:一键免费构建小程序访问
测试代码: https://gitee.com/cffycls/uc
三、Threejs 3D建模
概念:OpenGL、OpenGL ES、Canvas、WebGL概念梳理
Canvas(画布)只是HTML里面的一个元素,是呈现2D、3D绘图的基础,通过Canvas标签对象的getContext()方法,可以针对性的获取2D、3D绘图的一系列API方法。此外,OpenGL标准应用的是客户端,OpenGL ES应用的是移动端,WebGL标准应用的是浏览器平台。
Threejs中文网
《案例: 室内设计风格效果预览平台.室内设计》
入门课程:《Three.js 零基础新手入门实战》
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。