nodejs 使用socket.io与网页实时数据交互

首先我们需要安装socket模块,安装命令: npm install socket.io

其中服务端使用volatile 意思大概是说,当服务器发送数据时,客户端因为各种原因不能正常接收,比如网络问题、或者正处于长连接的建立连接阶段。此时会让我们的应用变得 suffer,那就需要考虑发送 volatile 数据。

服务端

io.on('connection',function(socket)); 监听客户端连接,回调函数会传递本次连接的socket
io.sockets.emit('String',data); 给所有客户端广播消息
io.sockets.socket(socketid).emit('String', data); 给指定的客户端发送消息

emit和on的用法,实现客户端与服务端的双向数据传递

下面一组方法实现了客户端与服务端的双向数据传递:
socket.on('String',function(data)); 监听客户端发送的信息
socket.emit('String', data); 给该socket的客户端发送消息,data可以是json类型数据,即{rp:"fine,thank you",re2:"hell2"}。这样在socket.on中可以直接获得指定数据,data.re2获得hell2。

1.emit方法可以用多种形式的参数

socket.emit('action');表示发送了一个action命令,在另一端接收时,可以这么写: socket.on('action',function(){...});不传递参数,直接执行function中的函数。
socket.emit('action',data);表示发送了一个action命令,还有data数据,在另一端接收时,可以这么写: socket.on('action',function(data){...});通过data传递数据。
socket.emit(action,arg1,arg2); 表示发送了一个action命令,还有两个数据,在另一端接收时,可以这么写: socket.on('action',function(arg1,arg2){...});

2.在emit方法中包含回调函数

socket.emit('action',data, function(arg1,arg2){...} );那么这里面有一个回调函数可以在另一端调用,另一端可以这么写:socket.on('action',function(data,fn){   fn('a','b') ;  });
上面的data数据可以有0个或者多个,相应的在另一端改变function中参数的个数即可,function中的参数个数和顺序应该和发送时一致
上面的fn表示另一个端传递过来的参数,是个函数,写fn('a','b') ;会回调函数执行。一次发送不应该写多个回调,否则只有最后一个起效,回调应作为最后一个参数。

客户端

建立一个socket连接

var socket = io.connect('http://localhost:3000');或var socket = io("ws://103.31.201.154:5555");

监听服务器消息和向服务器发送消息的方法和服务器端相同,通过emit和on。

客户端socket.on()监听的事件:

socket.on('disconnect', function() { console.log('当断开连接时客户端所做的操作,下面事件的使用on方法相同') });


connect:连接成功
connecting:正在连接
disconnect:断开连接
connect_failed:连接失败
error:错误发生,并且无法被其他事件类型所处理
message:同服务器端message事件
anything:同服务器端anything事件
reconnect_failed:重连失败
reconnect:成功重连
reconnecting:正在重连
当第一次连接时,事件触发顺序为:connecting->connect;当失去连接时,事件触发顺序为:disconnect->reconnecting(可能进行多次)->connecting->reconnect->connect。
本文转自:http://www.cnblogs.com/xiezhengcai/p/3956401.html
新加评论 评论标题:

文章评论

    客户端index.html代码

        2018-08-17    
    修改 删除
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>统计在线人数</title>
        <script src="http://localhost:3000/socket.io/socket.io.js"></script>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
            // 创建websocket连接
            var socket = io.connect('http://localhost:3000');
            // 把信息显示到div上
            socket.on('onlinenums', function (data) {   //接收服务端发送的数据
                    $("#nums").html(data.nums);//更改在线用户数      
            });
    
            socket.emit('msg', {rp:"fine,thank you"}); //向服务器发送消息
    
            //监听socket的相关事件,状态信息见正文
            socket.on('disconnect', function() {
                $("#tip").html("与服务其断开");
            });
            socket.on('connect', function() {
                $("#tip").html("与服务连接");
            });
            socket.on('connecting', function() {
                $("#tip").html("正在连接到服务器");
            });
            socket.on('reconnect', function() {
                $("#tip").html("重新连接到服务器");
            });
            socket.on('reconnecting', function() {
                $("#tip").html("正在重新连接到服务器");
            });
        </script>
    </head>
    <body>
        当前在线人数:<span style="color: red;" id="nums">0</span><br/>
        当前状态信息:<span style="color: red;" id="tip"></span>
    </body>
    </html>

    服务端index.js代码

        2018-08-17    
    修改 删除
    //统计在线用户数,未区别设备等
    var app = require('http').createServer(handler),
        io = require('socket.io').listen(app),
        fs = require('fs');
    //当前在线人数
    var onlineCount = 0;
    
    //响应客户端请求
    function handler (req, res) {
        fs.readFile(__dirname + '/index.html',
            function (err, data) {
                if (err) {
                    res.writeHead(500);
                    return res.end('Error loading index.html');
                }
                res.writeHead(200);
                res.end(data);
            });
    }
    
    //连接事件
    //io.sockets.on('connection', function (socket) {   //  和下面的关系
    io.on('connection', function (socket) {
        console.log('有新用户进入...');
        //叠加当前在线人数
        onlineCount++;
        var tweets = setInterval(function () {  //setInterval循环调用函数1000即1s
                //socket.volatile.emit('onlinenums', {nums : onlineCount}); //和下面的有什么区别?
                socket.emit('onlinenums', {nums : onlineCount});
        }, 1000);
    
        console.log('当前用户数量:'+onlineCount);
    
        //监听客户端断开连接
        socket.on('disconnect', function() {
            if(onlineCount > 0 ){
                //当前在线用户减一
                onlineCount--;
                console.log('当前用户数量:'+onlineCount);
            }
        });
    
        //接收客户端名为msg发送的数据
        socket.on('msg',function(tip){
            console.log(tip);
        });
    });
     
    //启动HTTP服务,绑定端口3000
    app.listen(3000, function(){
        console.log('listening on *:3000');
    });
服务端
emit和o的用法,实现客户端与服务端的双向数据传递
客户端
评论列表
客户端index.html代码
服务端index.js代码