iotgateway/IoTGateway/Areas/BasicData/Views/DeviceVariable/Index.cshtml

@model IoTGateway.ViewModel.BasicData.DeviceVariableVMs.DeviceVariableListVM
@inject IStringLocalizer<Program> Localizer;

<wt:treecontainer items="AllDevices" id-field="Searcher.DeviceId" height="500">
    <wt:searchpanel vm="@Model" reset-btn="true">
        <wt:row items-per-row="ItemsPerRowEnum.Three">
            <wt:combobox field="Searcher.DeviceId" items="Searcher.AllDevices" empty-text="@Localizer["Sys.All"]" />
            <wt:textbox field="Searcher.Name" />
            <wt:textbox field="Searcher.Method" />
            <wt:textbox field="Searcher.DeviceAddress" />
            <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" 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('animated bounceIn');
            setTimeout(function(){
                $('#id' + objmsg.VarId + '_Value').removeClass('bounceIn');
            }, 1500);

            //加工值
            $('#id' + objmsg.VarId + '_CookedValue').text(objmsg.CookedValue);
            $('#id' + objmsg.VarId + '_CookedValue').addClass('animated bounceIn');            
            setTimeout(function(){
                $('#id' + objmsg.VarId + '_CookedValue').removeClass('bounceIn');
            }, 1500);

            //状态
            $('#id' + objmsg.VarId + '_State').text(objmsg.StatusType);
            $('#id' + objmsg.VarId + '_State').addClass('animated bounceIn');
            setTimeout(function(){
                 $('#id' + objmsg.VarId + '_State').removeClass('bounceIn');
            }, 1500);
        })
    }
</script>