使用内置的websocket(mqtt)实现变量值实时刷新

This commit is contained in:
王海东 2021-12-21 23:56:30 +08:00
parent f5b96e665e
commit 8f32010b5d
9 changed files with 63 additions and 10 deletions

Binary file not shown.

View File

@ -55,9 +55,15 @@ namespace IoTGateway.ViewModel.BasicData.DeviceVariableVMs
this.MakeGridHeader(x => x.Method).SetSort(true).SetWidth(160),
this.MakeGridHeader(x => x.DeviceAddress).SetSort(true).SetWidth(80),
this.MakeGridHeader(x => x.DataType).SetSort(true).SetWidth(80),
this.MakeGridHeader(x => x.Value).SetWidth(80),
this.MakeGridHeader(x => x.CookedValue).SetWidth(80),
this.MakeGridHeader(x => x.State).SetWidth(80),
this.MakeGridHeader(x => x.Value).SetWidth(80).SetFormat((a,b)=>{
return $"<div id='id{a.ID}_Value'>{a.Value}</div>";
}),
this.MakeGridHeader(x => x.CookedValue).SetWidth(80).SetFormat((a,b)=>{
return $"<div id='id{a.ID}_CookedValue'>{a.CookedValue}</div>";
}),
this.MakeGridHeader(x => x.State).SetWidth(80).SetFormat((a,b)=>{
return $"<div id='id{a.ID}_State'>{a.State}</div>";
}),
this.MakeGridHeader(x => x.Expressions).SetWidth(150),
//this.MakeGridHeader(x => x.ProtectType).SetSort(true),
this.MakeGridHeader(x => x.DeviceName_view).SetSort(true).SetWidth(90),

View File

@ -11,5 +11,36 @@
<wt:combobox field="Searcher.DataType" empty-text="@Localizer["Sys.All"]" />
</wt:row>
</wt:searchpanel>
<wt:grid vm="@Model" url="/BasicData/DeviceVariable/Search" hidden-grid-index="true"/>
<wt:grid vm="@Model" url="/BasicData/DeviceVariable/Search" hidden-grid-index="true" done-func="inimqttclient" />
</wt:treecontainer>
<link href="~/sitecss/animate.min.css" rel="stylesheet" />
<script src="~/mqtt.min.js" type="text/javascript"></script>
<script type="text/javascript">
function inimqttclient() {
var options = {
//mqtt客户端的id这里面应该还可以加上其他参数具体看官方文档
clientId: 'mqttjs_' + (Math.random() * 10000000).toString()
}
var client = mqtt.connect('ws://' + window.location.host + '/mqtt', options);
client.on('connect', function () {
client.subscribe('internal/v1/gateway/telemetry/+/+', function (err) {
if (!err) {
console.log("订阅成功!")
} else {
console.log(err)
}
})
})
client.on('message', function (topic, message) {
var objmsg = $.parseJSON(message.toString());
$('#id' + objmsg.VarId + '_Value').text(objmsg.Value);
//$('#id' + objmsg.VarId + '_Value').addClass('fadeIn animated');
$('#id' + objmsg.VarId + '_CookedValue').text(objmsg.CookedValue);
//$('#id' + objmsg.VarId + '_CookedValue').addClass('fadeIn animated');
$('#id' + objmsg.VarId + '_StatusType').text(objmsg.StatusType);
//$('#id' + objmsg.VarId + '_StatusType').addClass('fadeIn animated');
})
}
</script>

1
IoTGateway/wwwroot/mqtt.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -15,6 +15,7 @@ using WalkingTec.Mvvm.Core;
using IoTGateway.DataAccess;
using IoTGateway.Model;
using DynamicExpresso;
using MQTTnet.Server;
namespace Plugin
{
@ -23,16 +24,17 @@ namespace Plugin
public DrvierService _DrvierManager;
public List<DeviceThread> DeviceThreads = new List<DeviceThread>();
public MyMqttClient _MyMqttClient;
private MyMqttClient _MyMqttClient;
private IMqttServer _MqttServer;
private string connnectSetting = IoTBackgroundService.connnectSetting;
private DBTypeEnum DBType = IoTBackgroundService.DBType;
private Interpreter interpreter = new();
public DeviceService(IConfiguration ConfigRoot, DrvierService drvierManager, MyMqttClient myMqttClient)
public DeviceService(IConfiguration ConfigRoot, DrvierService drvierManager, MyMqttClient myMqttClient, IMqttServer mqttServer)
{
_DrvierManager = drvierManager;
_MyMqttClient = myMqttClient;
_MqttServer = mqttServer;
try
{
@ -135,7 +137,7 @@ namespace Plugin
p.SetValue(DeviceObj, value);
}
var deviceThread = new DeviceThread(Device, DeviceObj, systemManage.GatewayName, _MyMqttClient, interpreter);
var deviceThread = new DeviceThread(Device, DeviceObj, systemManage.GatewayName, _MyMqttClient, interpreter, _MqttServer);
DeviceThreads.Add(deviceThread);
}

View File

@ -10,6 +10,8 @@ using IoTGateway.DataAccess;
using IoTGateway.Model;
using WalkingTec.Mvvm.Core;
using DynamicExpresso;
using MQTTnet.Server;
using Newtonsoft.Json;
namespace Plugin
{
@ -24,7 +26,7 @@ namespace Plugin
private CancellationTokenSource tokenSource = new CancellationTokenSource();
private Interpreter Interpreter = null;
public DeviceThread(Device device, IDriver driver, string ProjectId, MyMqttClient myMqttClient, Interpreter interpreter)
public DeviceThread(Device device, IDriver driver, string ProjectId, MyMqttClient myMqttClient, Interpreter interpreter, IMqttServer mqttServer)
{
Device = device;
Driver = driver;
@ -93,7 +95,7 @@ namespace Plugin
{
ret.StatusType = VaribaleStatusTypeEnum.ExpressionError;
}
}
}
else
ret.CookedValue = ret.Value;
@ -101,6 +103,10 @@ namespace Plugin
Console.WriteLine(Driver.Connect());
payLoad.Values[item.Name] = ret.CookedValue;
ret.VarId = item.ID;
mqttServer.PublishAsync($"internal/v1/gateway/telemetry/{Device.DeviceName}/{item.Name}", JsonConvert.SerializeObject(ret));
}
payLoad.TS = (long)(DateTime.Now - TsStartDt).TotalMilliseconds;

View File

@ -12,5 +12,6 @@ namespace PluginInterface
public object CookedValue { get; set; }
public string Message { get; set; }
public VaribaleStatusTypeEnum StatusType { get; set; }
public Guid VarId { get; set; }
}
}