基于node的socket.io实时监控数据变化更新页面,简单项目实例

1.前端引入socket.io.js 下载地址：https://pan.baidu.com/s/1DcTTPkDEvqD2CayoFA1F4A 提取码5umb
或者通过 CDN 的形式引入。<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
2.node 端安装 npm i socket.io模块
3.具体代码和用法如下：

1. index.js

var http=require("http");;//引入http
var socketIo=require("socket.io");//引入socket.io
var server=http.createServer(app);
var io=new socketIo(server);
//客户端  的访问地址
server.listen(8080);//express 监听 8080 端口


//每个客户端socket连接时都会触发 connection 事件
io.on("connection",function (clientSocket) {
    // socket.io 使用 emit(eventname,data) 发送消息，使用on(eventname,callback)监听消息
    //监听客户端发送的 sendMsg 事件
    clientSocket.on("sendMsg",function (data) {
        // data 为客户端发送的消息，可以是 字符串，json对象
        console.log(data)
        clientSocket.broadcast.emit("receiveMsg",data);
    })
});

2. index.html中的js代码

<script src="js/socket.io.js"></script>
<script type="text/javascript">
    //引入
    var socket = io.connect();
    var data={
              client:myid,//我的账号
              msg:txt,//发送内容
              sendwho:friid,//发给谁
              pic:pic1//我的头像
              };
     socket.emit("sendMsg",data);   //把data数据发送给后台
    //接收从服务端推送消息
     socket.on("receiveMsg",function (data) {             //data是接收到的数据
            //判断服务端推送的消息
            if(myyid!=data.sendwho){
                //如果不是发给我的 ，不做任何操作
            }else{
                //若果是发给我的，将消息渲染在指定位置
            }
     });
</script>

3.最终效果：