如何对接 webSocket

TIP

项目提供了通过 webSocket 后端推送 socket 来实现控制场景模型内容的功能

修改 socket url 地址

这里首先将

.env.development

.env.production

文件中 VITE_APP_WEB_SOCKET_URL 替换成你自己 socket 的 url

定义推送数据的格式

然后后端按照这种数据格式字符串进行推送即可

// 模型位置ModelPosition
{"taskCode":"modelMove","taskType":"ModelPosition","taskTime":"500","taskData":{"x":"50","y":"0","z":"0"}}
// 模型旋转ModelRotation
{"taskCode":"modelRotation","taskType":"ModelRotation","taskTime":"500","taskData":{"x":"50","y":"0","z":"0"}}
// 模型缩放ModelScale
{"taskCode":"modelScale","taskType":"ModelScale","taskTime":"500","taskData":{"x":"50","y":"0","z":"0"}}
// 模型显隐ModelVisibility
{"taskCode":"modelVisibility","taskType":"ModelVisibility","taskData":{"visible":true}}
// 模型颜色ModelColor
{"taskCode":"modelColor","taskType":"ModelColor",taskData":{"color":"#000000"}}
// 视频播放/停止VideoPlayOrStop
{"taskCode":"videoPlayOrStop","taskType":"VideoPlayOrStop","taskData":{"play":true}}
// 更新文本内容UpdateTextContent
{"taskCode":"updateTextContent","taskType":"UpdateTextContent","taskData":{"text":"Hello World"}}
// 启动停止轴动画StartStopAxisAnimation
{"taskCode":"startStopAxisAnimation","taskType":"StartStopAxisAnimation","taskData":{"start":true}}
// 移动相机MoveCamera
{"taskCode":"moveCamera","taskType":"MoveCamera","taskTime":"500","taskData":{"x":"50","y":"0","z":"0"}}

前端通过后端推送的 taskCode 去找到 前端已添加的 socket 任务列表里面是否有对应相同的 taskCode 然后决定是否要执行本次推送任务

移除非必要模块代码

最后移除 手动执行 和 任务数据值 这两个地方的代码逻辑，因为这两个功能是为了方便体验 socket 功能实际的效果进行设计的，当然如果你认为这两个功能有意义也可以保留。

手动执行

任务数据值