搭建简易的物联网服务端和客户端-redis+websocket（二十五）

治电小白菜

发布于 2020-08-25 14:39:14

2.4K0

发布于 2020-08-25 14:39:14

大佬向我介绍了websocket的好处，我也查阅了一些资料，确实websocket比ajax等一些来说对于前端的资源消耗很低感谢EarthChen的帮助代码地址：https://github.com/ZZES-ZVD/websocket_idemo 2017.8.19

搭建简易的物联网服务端和客户端目录

redis+websocket

1.redis

1)介绍

Redis 是一个开源（BSD许可）的，内存中的数据结构存储系统，它可以用作数据库、缓存和消息中间件。

2)官网

https://redis.io/

3)相关说明

官方没有支持windows，但是还是有大神，所以不用担心
redis具体操作可以查看菜鸟教程
nodejs下操作redis可以查看之前的文章

2.websocket

1)介绍

上知乎https://www.zhihu.com/question/20215561

就是一个新的基于TCP的连接协议

2)socket.io

Nodejs的websocket服务器框架

官网：https://socket.io/

3)socket.io安装

nodejs：

npm install --save socket.io

前端使用socket.io.js:

下载地址：https://github.com/socketio/socket.io-client/tree/master/dist 当然cdn推荐使用bootcdn

<script src="/socket.io/socket.io.js"></script>

3.具体数据传输方式

乱画的

4.tcp服务器

TCP服务器，通过与硬件建立TCP连接，接受硬件发送过来的json数据，将数据解析，随后更新到redis中

1)引入包

var net = require('net')
var redis = require('redis')

2)连接redis,ip+端口

var redisClient = redis.createClient({
    host:'localhost',
    port:6379
});

3)创建TCP服务器和连接Redis

net.createServer(function(socket){
    socket.on('data', function(data){

4)接受到数据，并存入redis

超时时间一定要设置，虽然每次都是更新数据，但是数据放在内存里还是不好，毕竟小霸王机

//解析TCP接受到的JSON数据
var text = JSON.parse(data.toString());
//将数据存入redis，键名为"hum"
redisClient.set("hum", text.hum, function(err, reply){
    console.log("set hum error:" + err);
})
redisClient.expire('hum', 50);//设置超时时间

5.配置socket.io

1)引入包

var app = require('http').createServer()
var io = require('socket.io')(app)
var redis = require('redis')

2)连接redis

和上面一样

3)设置端口

自己定，别冲突就好（标准端口一般是1-1024,大于1024的是应用程序可以自定义的端口）

app.listen(5000)

4)连接redis，建立websocket

redisClient.on('ready', function() {
    io.on('connection', function(socket) {
        //定时推送到前端，求助，还有其他方式吗？
        setInterval(function(){
            redisClient.get("hum", function(err, reply) {
                console.log("get tem error:" + err)//打印错误信息
                console.log("get the humdata: " + reply)//打印接收到的信息
                socket.emit('news', { reply })//推送信息
            })
        }, 10000)
    })
})

6.前端

我使用的是echarts图表，为了防止代码太多，我就用dom更新了

1)引入

<script src="http://cdn.bootcss.com/socket.io/2.0.3/socket.io.js"></script>

2)数据显示

<div>the data is <span id="humdata"></span></div>

3)与后台建立websocket通信

连接服务 -> 接受数据

var socket = io('http://localhost:5000')
socket.on('news', function(data) {
    //注意这里是`data.reply`，可以看后台，传过来的变量名是reply
    document.getElementById('humdata').innerHTML=data.reply;
})