nodejs推送push mysql数据更新到前端显示

server.js
//建立MySQL连接, 根据自己环境修改相应的数据库信息
var app = require('http').createServer(handler),
  io = require('socket.io').listen(app),
  fs = require('fs'),
  mysql = require('mysql'),
  connectionsArray = [],
  connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'nodejs',
    port: 3306
  }),
  POLLING_INTERVAL = 1000,
  pollingTimer;

// 检查数据库连接是否正常
connection.connect(function(err) {
  // 不出现错误信息，那表示数据库连接成功
  console.log(err);
});

//启动HTTP服务，绑定端口8080
app.listen(3000);

// 加载客户端首页
function handler(req, res) {
  fs.readFile(__dirname + '/client.html', function(err, data) {
    if (err) {
      console.log(err);
      res.writeHead(500);
      return res.end('加载客户端首页发生错误...');
    }
    res.writeHead(200);
    res.end(data);
  });
}

/*
 * 这个就是实现主要功能的方法，间隔3秒去查询数据库表，有更新就推送给客户端
 */
var pollingLoop = function() {

  // 查询数据库
  var query = connection.query('SELECT * FROM prices'),
    articles = []; // 用于保存查询结果

  // 查询结果监听
  query
    .on('error', function(err) {
      // 查询出错处理
      console.log(err);
      updateSockets(err);
    })
    .on('result', function(user) {
      // 加入查询到的结果到articles数组
      articles.push(user);
    })
    .on('end', function() {
      // 检查是否有客户端连接，有连接就继续查询数据库
      if (connectionsArray.length) {
        pollingTimer = setTimeout(pollingLoop, POLLING_INTERVAL);

        updateSockets({
          articles: articles
        });
      }
    });

};


// 创建一个websocket连接，实时更新数据
io.sockets.on('connection', function(socket) {

  console.log('当前连接客户端数量:' + connectionsArray.length);
  // 有客户端连接的时候才去查询，不然都是浪费资源
  if (!connectionsArray.length) {
    pollingLoop();
  }

  socket.on('disconnect', function() {
    var socketIndex = connectionsArray.indexOf(socket);
    console.log('socket = ' + socketIndex + ' disconnected');
    if (socketIndex >= 0) {
      connectionsArray.splice(socketIndex, 1);
    }
  });

  console.log('有新的客户端连接!');
  connectionsArray.push(socket);

});

var updateSockets = function(data) {
  // 加上最新的更新时间
  data.time = new Date();
  // 推送最新的更新信息到所以连接到服务器的客户端
  connectionsArray.forEach(function(tmpSocket) {
    tmpSocket.volatile.emit('notification', data);
  });
};

client.html

<html>
	<head>
		<title>The use of Nodejs to achieve real-time push MySQL database up-to-date information to the client</title>
		<style>
			td {
				background:#ddd;
			}
			time {
				color:gray;
			}
			table {
				BORDER-LEFT: black 1px solid;/*左边框*/
				BORDER-RIGHT: black 1px solid;/*右边框*/
				BORDER-TOP: black 1px solid;/*上边框*/
				BORDER-BOTTOM: black 1px solid;/*下边框*/
				PADDING-LEFT: 2px;/*左间隙*/
				PADDING-RIGHT: 2px; /*右间隙*/
				PADDING-TOP: 2px;/*上间隙*/
				PADDING-BOTTOM: 2px;/*下间隙*/
				FONT-SIZE: 12px;/*字号*/
				CURSOR: hand;/*光标类型*/
				COLOR: #000000;/*字色*/
				FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#d4d0c8);/*滤镜*/
				}
			th{text-align=center;background-color:#006699;font-size:14px; 
			font-family: "隶书";color:#F2F3F7;padding:2px;line-height:22px;} 
			.row_add{text-align:center;background-color:#ccd2de;height:4px;font-size:12px;line-height:15px; 
			padding:2px;} 
		</style>
	</head>
	<body>
        <time></time>
        <div id="container">Loading ...</div>
    <script src="socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        // 创建websocket连接
        var socket = io.connect('http://localhost:3000');
        // 把信息显示到div上
        socket.on('notification', function (data) {
        var articlesList = "<table align='center'><thead><tr><th>stockid</th><th>typeabbrev</th><th>currabrev</th>"+
                           "<th>debtorno</th><th>price</th><th>branchcode</th>"+
						   "<th>startdate</th><th>enddate</th></tr>";
        $.each(data.articles,function(index,article){
            articlesList +="<tr><td>" + article.stockid + "</td>" +
                         "<td>" + article.typeabbrev + "</td>" +
                         "<td>" + article.currabrev + "</td>"+
						 "<td>" + article.debtorno + "</td>"+
						 "<td>" + article.price + "</td>"+
						 "<td>" + article.branchcode + "</td>"+
						 "<td>" + article.startdate + "</td>"+
						 "<td>" + article.enddate + "</td>"+
                         "</tr>";
        });
        articlesList += "</thead></table>";
        $('#container').html(articlesList);
   
        $('time').html('Last Time:' + data.time);
      });
    </script>
    </body>
</html>

需要组件

socket.io  mysql

npm install mysql -g 最新版本
npm install mysql@2.1  指定版本

npm install socket.io -g 最新版本
npm install socket.io@1.0.3  指定版本

socket.io-client

connect

如果要做nodejs 实时聊天的还需要session 组件

运行结果：

在nodejs 目录下 node server.js 启动服务我监听的端口为3000

mysql数据库prices表有异动 nodejs

socket.io 开始每3秒轮询 把数据传递到client

c推送到client的数据

前端服务器websocket还是有缺点的，在中国这个ie6,7,8横行的国度里是没有效果的，我是用谷歌浏览器才测试的,火狐也可以。

当然可以多开几个窗口，在prices表中有crud的操作，都会把mysql的数据推送到前端客户端...

有很多人对nodejs不是太了解，我把我写的js和主键放在一起了，点击bat文件即可，你唯一要修改的地方是修改mysql数据库连接和表名以及字段名称

版本是nodejs0.83 不是最新版本的，最新版本的socket.io 写法不一样.组件发生了变化，如果对nodejs很了解不需要下载我的源码，如果不熟悉那么你不下载就运行不了，也学不会nodejs.

解压nodejs-push-MySQL.rar不要把node_modules中的组件给删除了.

点击nodejs-push-MySQL文件夹修改server.js或者client.html即可.

要连接oracle请自己下组件,其他数据库也一样.

猜你喜欢

打赏

3个评论

15个牛币 NodeJS JavaScript

文件名:nodejs-push-MySQL.rar,文件大小:1348.02K 下载