5，C# 物联网温度采集系统开发，web手机端口进行控制远程硬件实现与温湿度实时显示（五）

前面已实现了，硬件链接到远程服务器。现在为了用户使用与用户实时查看，这里面有两个方法，一个是保存到数据库用户看的时候直接从数据库里面读取，一般的都是使用消息队列进行数据的写入，这里主要实现一下硬件数据实时展示到Web 的Ui的界面，达到实时的效果。下面是上次的代码修改而来的

 var byteBuffer = message as IByteBuffer;
            var temp = byteBuffer.GetShort(0);
            var temph = temp >> 4;
            var templ = temp & 0x0f;
            templ = templ * 6 / 10;
            var info = (temph % 100) / 10 + "" + (temph % 100) % 10 + "." + templ + "℃";
            var buffer = DotNetty.Buffers.Unpooled.WrappedBuffer(byteBuffer);

            if (_connection.State == HubConnectionState.Connected)
            {
                await _connection.InvokeAsync("SendMessage", "STC89C52", info);
            }
            else
            {
                IniSignlar();
            }
            var rmtPoint = context.Channel.RemoteAddress as IPEndPoint;
            //packet.RemoteIp = rmtPoint.Address.ToString();
            //packet.RemotePort = rmtPoint.Port;

            _logger.LogInformation($"reviced Datetime={DateTime.Now},远程地址:{rmtPoint.Address.ToString()},端口:{rmtPoint.Port}，TSC89C52,DS18B20 Value={info}");
            _logger.LogInformation($"reviced wendu data={ByteBufferUtil.PrettyHexDump(byteBuffer)}");

下面是前端代码:

<script src="~/js/jquery-1.11.0.min.js"></script>
<script src="~/lib/signalr/dist/browser/signalr.js"></script>

<script>

    function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
        $("#time").text(currentdate);

}

    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    connection.on("ReceiveMessage", function (user, message) {
        var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        $("#wendu").html(msg);
        getNowFormatDate();

    });

    connection.start().catch(function (err) {
        return console.error(err.toString());
    });

</script>

这样就实现了，全部的功能,

这个demo基本就完成了，所以说C#来做IOT感觉比其他的语言更合适一些，我使用的Core 2.2这个可以发布到服务器，也可以发布到ARM的小的网关上，目前测试发布到树莓派3是没有问题，使用树莓派官方系统。后面我们也在做工业物联网，与车联网的项目，后面有时间会陆续与大家分享一下，C#实现的IOT方面的经验