您的位置：首页 > 其它

websocket上手，应用websocket广播同步客户端信息

2015-08-24 10:08 726 查看
本文内容基于nodejs，简单搭建node服务可参考

/article/1899993.html

websocket实现了浏览器与服务器全双工通信，允许多个客户端同时和服务器进行通信，也允许客户端主向多个客户端发送信息

1.安装socket模块

如果我们要使用websocket，需要先给服务器安装socket模块，

例如给node的服务文件server3.js，安装socket

cmd控制台cd切换到server3.js目录下，执行命令npm install socket.io

安装完毕后，在server3.js的目录下，多了一个node_modules文件夹。

这个文件夹就是socket模块的目录。

然后在server3.js文件开头引入socket.io：

[code]var io = require('socket.io');


2.在server3.js文件中给http监听对象添加socket监听

var socket = io.listen(httpServer);//httpServer是http监听

3.客户端发送socket请求

假设index.html页面为客户端，如果要向服务端发送socket连接请求

首先得引入client.socket.js文件

再创建socket连接

[code]var scoket = io.connect('http://localhost:8888');//协议不能丢


4.监听socket连接事件

[code]//socket代表的是当前服务端和客户端建立的对象（TCP）
//socket.sockets对象监听connection事件，只要有一个客户端进行了
//socket对象连接，就会执行function函数内容
socket.sockets.on('connection',function(){

            //这里写wsocket连接后的事件
            //socket基本方法：
            socket.emit(event1,data);//向客户端发送event1事件，并传输data
            socket.on(event2,function(data){
                //接收客户端发来的event2事件，并得到传输来data
                //根据事件名和data数据进行下一步的操作
            });

            socket.broadcast.emit(event3,data);
            //向所有客户端广播event1事件，并传输data

        });


例子：应用websocket广播同步客户端信息

例子功能：

在客户端设置一个”连接socket”按钮和一个div，

当客户端1（用浏览器窗口代替不同客户端）点击连接socket按钮，就会得到来自服务器的“欢迎你”提示。

当客户端2点击连接socket按钮，也会得到“欢迎你”提示，此时客户端1会得到”有新人进来了”。

当客户端3点击连接socket按钮，也会得到“欢迎你”提示，此时客户端1和2会得到”有新人进来了”的提示。

另外，当一个客户端点击socket按钮，那么该客户端上的红色div可以拖动，而且会把位置信息传递给其他连接了socket的客户端，其他客户端的红色div也会运动到相对位置。

功能分析 :

“欢迎你”的提示来自服务器，只要服务器端出发了socket的connection监听事件，就让服务器端的socket发送hello事件给对应的客户端。

[code]socket.emit('hello','欢迎你');


客户端接收到hello事件，用socket.on()方法捕获hello事件，打印data数据即可。

而服务器端的广播事件，

[code]socket.broadcast.emit('a','有新人进来了');


流程也和上面的普通emit事件一样，但是他发送给的是已建立的所有连接，所以所有已经连接的客户端都能捕捉到a事件。就能打印”有新人进来了”

div同步拖动： 一个客户端拖动div的时候，记录位置，将其以move监听事件的形式emit到服务器

[code]scoket.emit(
    'move',
    '{"left":'+oDiv.offsetLeft+',"top":'+oDiv.offsetTop+'}'
    );


然后服务器再把位置广播到所有客户端，实现位置同步

[code]socket.on('move',function(data){
        socket.broadcast.emit('moveto',data);
    });


下面是整体代码

index.html:

[code]<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
<style>
    #div1{width: 100px;height: 100px;background-color: red;position: absolute;
        top:30px;left: 100px;}
</style>
<script src="client.socket.js"></script>

<script>
window.onload=function(){
    var oBtn = document.getElementsByTagName('input')[0];
    var scoket = null;
    var oDiv = document.getElementById('div1');

    oBtn.onclick= function(){
        drag(oDiv);
        scoket = io.connect('http://localhost:8888');
        scoket.on('hello',function(data){
            alert(data);
        });
        scoket.on('moveto',function(data){

            var data = JSON.parse(data);
            var L = data.left;
            var T = data.top;
            oDiv.style.left = L+'px';
            oDiv.style.top = T+'px';
        });

        scoket.on('a',function(data){
            //console.log(1);
            alert(data);
        });

        function drag(obj){
            obj.onmousedown = function(ev){
                var ev = ev||event;
                var disX = ev.clientX - obj.offsetLeft;
                var disY = ev.clientY - obj.offsetTop;
                document.onmousemove=function(ev){
                    var L = ev.clientX - disX;
                    var T = ev.clientY -disY;
                    obj.style.left = L+'px';
                    obj.style.top = T+'px';
                    scoket.emit('move','{"left":'+oDiv.offsetLeft+',"top":'+oDiv.offsetTop+'}');
                }
                document.onmouseup = function(ev){
                    document.onmousemove = document.onmouseup = null;

                }

                return false;

            }
        }

    }

}
</script>
</head>
<body>
    <h1>这里是主页</h1>
    <input type="button" value="发送socket" />

    <div id = "div1"></div>
</body>
</html>


server3.js:

[code]var http = require('http');
var fs = require('fs');
var io = require('socket.io');

var documentRoot = 'E:/PhpProject/html5/websocket/www';
var httpServer = http.createServer(function(req,res){

    var url = req.url;
    var file = documentRoot + url;
    console.log(url);
    fs.readFile( file , function(err,data){

        if(err){
            res.writeHeader(404,{
                'content-type' : 'text/html;charset="utf-8"'
            });
            res.write('<h1>404错误</h1><p>你要找的页面不存在</p>');
            res.end();
        }else{
            res.writeHeader(200,{
                'content-type' : 'text/html;charset="utf-8"'
            });
            res.write(data);
            res.end();

        }

    }); 

}).listen(8888);

var socket = io.listen(httpServer);
socket.sockets.on('connection',function(socket){
    //socket代表的是当前服务端和客户端建立的对象（TCP）
    socket.emit('hello','欢迎你');
    socket.broadcast.emit('a','有新人进来了');
    socket.on('move',function(data){
        socket.broadcast.emit('moveto',data);
    });

});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航