特性：
- 这是一个用node程序模拟的mqtt设备，定时发送内存/CPU使用率，接收shell命令
- 完全适配thingsboard内部部件"Contronl widgets>RPC remote shell"
- 可以看作thingsboard版本的ssh
- 启动shell-device
cd node-device
npm install
# 修改配置文件 config/index.js：mqtt broker, token
nano config/index.js
npm run shell-device
- 在thingsboard看板添加RPC remote shell部件，绑定的设备和第一步配置的设备相同
这里使用的TB版本是3.3.3，发送消息：
self.onInit = function() {
self.ctx.$scope.sendMessage = function() {
const $injector = self.ctx.$scope.$injector;
const broadcastService = $injector.get(self.ctx.servicesMap.get('broadcastService'));
broadcastService.broadcast('SOME_CUSTOM_EVENT', {
message: 'Hello ThingsBoard'
});
}
}接收消息：
self.onInit = function() {
const $injector = self.ctx.$scope.$injector;
const broadcastService = $injector.get(self.ctx.servicesMap.get('broadcastService'));
broadcastService.on('SOME_CUSTOM_EVENT', (evt, data) => {
// data 是个数组
console.log('broadcast message', data);
self.ctx.$scope.message = data[0].message;
self.ctx.detectChanges();
});
} 使用broadcastService进行部件之间的通讯是最佳方式，使用全局对象也可以，比如一个部件对self.ctx.userService定义新方法，然后在其他部件进行调用。或者使用window.onmessage和window.postMessage。
参考：thingsboard/thingsboard#976
用法：导入部件后，在仪表板添加此部件。数据源添加任意一设备（此设备在多个客户之间共享），遥测名称为“chat”。时间窗口数据聚合功能选“空”，一定！
原理：
- 把聊天记录当作遥测进行发送
self.ctx.http.post(`api/plugins/telemetry/DEVICE/${entityId}/timeseries/ANY`,
{
chat: {
userId: self.ctx.currentUser.userId,
nick: self.ctx.currentUser.firstName + self.ctx.currentUser.lastName,
content: self.ctx.$scope.content
}
},
{
'headers': {
'content-type': 'application/json',
'X-Authorization': 'bearer ' + localStorage.getItem('jwt_token')
}
}).subscribe(() => {
self.ctx.$scope.content = "";
});- 设置好数据源，面板通过WebSocket自动订阅遥测，我们只需要根据数据做展示
用法：导入部件后，在仪表板添加此部件。数据源添加任意一设备（此设备在多个客户之间共享），遥测名称为“draw_event”。时间窗口数据聚合功能选“空”，一定！
原理：
- 把绘画动作当作遥测进行发送
- 根据drawingboard提供的各种绘图事件构建遥测（一个json对象）并发送
描点动作：
{
cmd: {
name: 'stroke',
points: self.ctx.$scope.points,
color: self.ctx.$scope.board.mode === 'pencil' ? self.ctx.$scope.board.color : 'white',
lineWidth: self.ctx.$scope.board.ctx.lineWidth
},
drawId: ++self.ctx.$scope.drawId,
userId: self.ctx.currentUser.userId,
session: self.ctx.$scope.session
}填充动作：
{
cmd: {
name: 'fill',
coords: event.coords,
color: self.ctx.$scope.board.color
}，
drawId: ++self.ctx.$scope.drawId,
userId: self.ctx.currentUser.userId,
session: self.ctx.$scope.session
}- session属性表示发送方，发送方据此无需重复绘图
- 根据遥测信息调用drawingboard提供的绘图方法
- 可多人同时操作
缺点：
- 只要遇到reset动作，图像被全部清空
- 多人同时操作，撤销动作的效果会不一样，这是因为各人进入的时间不一样，得到的绘图动作数量不一样，而且最开始的绘制过程因为性能原因没有保存每一步的history，只在最后保存了history
参考：http://leimi.github.io/drawingboard.js/
把强大的excalidraw嵌入到thingsboard面板
参考：
- https://www.npmjs.com/package/@excalidraw/excalidraw
- https://codesandbox.io/s/excalidraw-ehlz3?file=/src/App.js
作者：caowm ([email protected])
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent