（二）数据推送之websocket
2017-12-11 本文已影响0人
mkv_me
介绍
websocket它是一种长连接，通过websocket我们能实现后端向前端推送数据，前端也可以向后端推送数据。这里我们主要讲前端H5 websocket怎样和nodejs配合。
为什么要用到socket.io呢？
因为它承载了socket大部分功能，而且相对稳定
服务器端
- 第一步我们建一个express项目
cnpm install express --save
cnpm install -g express-generator
express
- 第二步我们要在项目文件里安装socket.io
cnpm install socket.io --save
- 第二步我们在node_module里面找到socket.io.js这个文件，这是给前端用的
文件在node_modules/socket.io-client/dist/socket.io.js
接下来我们在app.js中引入socket.io
var express = require('express');
var path = require('path');
var app = express();
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io').listen(server);
app.set('port', 3000);
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.static(path.join(__dirname, 'public')));
io.on('connection',function(socket){
socket.emit('open'); // 通知客户端已连接
// 对message事件的监听
socket.on('message',function(msg){
console.log('this is msg:',msg);
socket.emit('test','server ready');
});
// 监听退出事件
socket.on('disconnect',function(){});
})
app.get('/',function(req, res){
res.sendfile('views/index.html');
});
server.listen(app.get('port'),function(){
console.log("socket server listen" + app.get('port'));
});
在views文件夹里建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello
<script src="javascripts/socket.io.js"></script>
<script src="javascripts/main.js"></script>
</body>
</html>
在静态文件javascripts文件夹下建main.js
(function(){
var i = 0;
// 建立websocket连接
var socket = io.connect("http://localhost:3000");
// 收到server的连接确认
socket.on('open',function(){
console.log('已连接');
socket.send("ok");
})
socket.on('test',function(json){
console.log('test',json);
})
})();
具体步骤：
- 在app.js文件中用socket.io监听server端口
- 在main.js文件中建立websocket连接
- app.js会在connect事件中监听到连接，并触发open（自己定义的）事件
- 此时前端监听到open事件
- 同时前端也可以用socket连接用send方法向后端推送消息
- 后端会在message事件中监听到前端推送过来的消息
更多方法请查 官网api
