c++ libwebsocket库应用开发3

一瓶不满半瓶晃

1002人浏览 · 2021-11-07 18:59:08

一瓶不满半瓶晃 · 2021-11-07 18:59:08 发布

web 端接收二进制图像数据与文本数据显示部分

<html>
<head>
<title>Simple client</title>

}

function init() {
img = document.querySelector('#player')
img.onload = function (e) {
var img = e.target
var url = img.src
revokeObjectURL(url)
lastFrame = null

};

wsFrameData = new WebSocket("ws://127.0.0.1:9005/newtoken=a2abd43dfooepcxw");
// Set event handlers.
wsFrameData.onopen = function () {
output("wsFrameData onopen");
};

           // Connect to Web Socket to open senser
           wscontrol = new WebSocket("ws://127.0.0.1:9006/newtoken=a2abd43dfooepcxw");
           // Set event handlers.
           wscontrol.onopen = function() {
               output("wscontrol onopen ");
           };

wsFrameData.onmessage = function (e) {
           icount = icount+1;

var timestamp = parseInt(new Date().getTime() / 1000);
if (typeof (e.data) == "string") {
output("onmessage: " + e.data +" icount:" + icount);
} else {

               //output("icount:" + icount + " stamp:" + timestamp);

// web浏览器会将二进制数据在传输过程加入base64编解码。
// var reader = new FileReader();
// reader.onload = function(e){
//    if(e.target.readyState == FileReader.DONE){
//
//        console.log('**********');
//
//        var url = e.target.result;
//
//        var text_value=url.replace("application/octet-stream","image/jpg");
//
//        var img = document.getElementById("player");
//        //img.innerHTML = "<img src = "+text_value+" />";
//        img.src = text_value;
//    }
// }
// reader.readAsDataURL(e.data);

if (!lastFrame) {
requestAnimationFrame(updateFrame)
}

// 下面的方式将二进制数据交给了image.src
lastFrame = e.data
}

};

wsFrameData.onclose = function (e) {
output("onclose");
               console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
               console.log(e)
};
wsFrameData.onerror = function (e) {
output("onerror");
console.log(e)
};

           wscontrol.onclose = function () {
output("wscontrol onclose");
};
wscontrol.onerror = function (e) {
output("wscontrol onerror");
console.log(e)
};
}

function onSubmit() {

var input = document.getElementById("input");
// You can send message to the Web Socket using ws.send.
var timestamp = parseInt(new Date().getTime() / 1000);

wsFrameData.send(input.value);
output("send: " + input.value + " stamp:" + timestamp);
input.value = "";
input.focus();
}

function output(str) {
var log = document.getElementById("log");
var escaped = str.replace(/&/, "&").replace(/</, "<").replace(/>/, ">").replace(/"/, """); // "
log.innerHTML = str;
}
</script>

</head>
<body onLoad="init();">
<form onSubmit="onSubmit(); return false;">
<input type="text" id="input">
<input type="submit" value="Send">
<button onClick="onCloseClick1(); return false;">close</button>
</form>

<button onClick="onOpenClick(); return false;">OpenSenser</button>
<button onClick="onCloseClick(); return false;">CloseSenser</button>

</body>
</html>

天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

graphify 视频音视频转写全流程解析：从 detect 结果到知识图谱文档的 Step 2.5

graphify 的核心能力是把任意语料（代码、文档、PDF、图片）转化为可查询的知识图谱，而视频与音频文件无法被直接阅读，必须先把它们转写成文本。本文围绕 `graphify` 运行手册中的转写参考文档 [transcribe.md](https://link.gitcode.com/i/d3285781588e0f1b84886dfdbc4fe7f6)，完整讲解 "Step 2.5 - Tra

天工造物局

ML-For-Beginners 终章：经典机器学习在金融、医疗、零售等八大行业中的真实落地场景

本篇技术指南基于开源课程仓库 ML-For-Beginners 的收尾课程《Postscript: Machine learning in the real world》（对应仓库目录 [9-Real-World/1-Applications](https://link.gitcode.com/i/6b23002df80861c20abf34d7db63ef41)）编写。该课此前 11 周的教学带

天工造物局

graphify 知识图谱查询实战：query / path / explain 与可审计的答案闭环

本指南以 graphify 的 Trae 版查询技能参考（[graphify/skills/trae/references/query.md](https://link.gitcode.com/i/72a7875d46ec6d3706d31791f3cdcbe0)）为主体，系统讲解如何针对**已构建好的知识图谱**执行三类查询：语义相关节点遍历（query）、两概念间最短路径（path）、单节点关