数据同步推送，uniCloud云开发，Threejs

一、数据同步推送

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 零基础新手入门实战》