【求大神】canvas实时显示二进制数据(纯问题,无需写代码)

这样,有一台c++写的频谱仪,需要做一个网页来实时它的显示数据,800个点,100ms刷新一次。提供了两个端口,一个传输数据一个进行控制,进行基于tcp协议的二进制数据传输,做个局域网形式的就行,连上就能显示。

我的想法,显示肯定用canvas,用的echarts,现在接收数据解析数据什么都会,但是这个需要怎么实现呢?看过nodejs和websocket、还有socket.io。

问题一、我还需不需要写服务器,直接写客户端就行了吗?那相关文件放在哪里?
问题二、目前用的nodejs里的net模块,这个网上的例子很少,客户端client.js也是要用cmd 里node client.js来运行吗?
问题三、socket.io那个方法我最中意,但是我模拟数据时用net方式可以连上软件sokit,socket.io连不上,这个究竟能否实现tcp连接?

思路有些混乱,各路大神也可以直接说思路

3个回答

喜欢你这种只讨论思路提问方式。 :)
你首先要确定自己需求中的几个细节问题:
1. 你这个页面只是用来看数据的,还是边看边要把数据存下来?
2. 如果你只想用一个纯页面搞定,那为什么局限于html模式,而不采用独立程序模式?

接下来假设你就是要用独立的html模式做监控,且需要对数据做一定的记录,那你就可以考虑这么实现:
1. 首先你的页面必须用HTML5实现,且需要用支持websocket功能的浏览器打开。
2. 不管你的html里用什么框架,最终还是要调用底层的websocket来和远程进行通讯,而且你的通讯协议是自定义的,因此个人建议你直接操作websocket代码更简单,页面操作部分可以借用jquery一类简化你的操作
3. 显示部分你既然决定使用echart了,那就不必在意它的实现方式是不是采用canvas,只要把div容器设置到echat中后,再开个定时器自动轮询加载相关的数据则可。
4. 无论你数据最终是否保存,为了体现你程序的友好性,你把采集的历史数据用html5带的localStorage进行保存一下,并在打开页面时自动读取这些数据进行展示。

按照这种模式开发后,你那台采集机器需要满足以下几个条件:
1. 所有的html和相关的css, js等文件需要保存在一个固定目录中,由浏览器直接打开首页来加载。
2. 此机器需要和频谱仪在同一个网段,因为它需要直接访问频谱仪所在的地址。
3. 此机器的浏览器建议用火狐或谷歌的最新版,以防止html5支持不全,引起不必要的麻烦。

TDArray
TDArray 有一点我还是不太明白,其实这个采集机器和频谱仪是一体的,频谱仪写的有程序,语言是c++,他提供了两个端口,一个用来传输数据,一个需要通过指令进行控制里面cmd,那这个过程需要怎么实现呢,我就是主要这点屡不清楚。
大约 3 年之前 回复
TDArray
TDArray 谢谢回答,localStorage这个我确实没想到,大赞。
大约 3 年之前 回复

你不用在意频谱仪是用什么语言写的,你只要把它当成一个服务器,这个服务器提供两个端口,一个接收数据用,一个发送指令用。这个只需要开两个websocket链接对象就可以。
我如果估计不错的话,发送数据那个应该只要连上就会不停的发数据。因此这个websocket对象就作为全局变量存着,然后一直开着,一收到消息就初始化echart的图形。
另一个发送指令的,我如果估计不错的话,应该是允许短链接的,所以可以在页面上有一些操作按钮,当按钮操作后,再创建websocket对象,然后发送指令后就中断并释放这个对象。

TDArray
TDArray 非常感谢,帮大忙了,你这一说我就一下子明白了。
大约 3 年之前 回复

有一点我还是不太明白,其实这个采集机器和频谱仪是一体的,频谱仪写的有程序,语言是c++,他提供了两个端口,一个用来传输数据,一个需要通过指令进行控制里面cmd,那这个过程需要怎么实现呢,我就是主要这点屡不清楚。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问