（二）数据推送之websocket

介绍

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

    
    


    hello
    
    

在静态文件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);
    })
})();

具体步骤：

1. 在app.js文件中用socket.io监听server端口
2. 在main.js文件中建立websocket连接
3. app.js会在connect事件中监听到连接，并触发open（自己定义的）事件
4. 此时前端监听到open事件
5. 同时前端也可以用socket连接用send方法向后端推送消息
6. 后端会在message事件中监听到前端推送过来的消息

更多方法请查 官网api