使用websockets在其他窗口中模拟鼠标事件(Javascript)

时间:2014-04-16 06:24:06

标签: javascript php jquery websocket

这里我想要实现的是制作一个websocket程序,其中如果在另一个浏览器窗口中触发了窗口中的用户“mousedown + mousemoves”同一事件。

所以这就是我到目前为止所做的:

客户端JS代码:

 var clicking = false;
 $(document).mouseup(function(){
         clicking = false;
       });

 $('#canvas').mousedown(function(e){
       clicking = true;
       var ww= e.pageX;
       var mm = e.pageY;

('#canvas').mousemove(function(event){ 
      if(clicking === false) 
         {  
      var msg = { //sends data
     w:'',
     m:'',
     type:"simple",
     x:event.pageX,
     y:event.pageY,
     name: myname,
     color : '<?php echo $colours[$user_colour]; ?>'
    };
         }
else{
var msg = {
    w:'ww',
    m:'mm',
    type:"move", 
    x:event.pageX,
    y:event.pageY,
    name: myname,
    color : '<?php echo $colours[$user_colour]; ?>'
    };
        }

 websocket.send(JSON.stringify(msg));   


 });
});

现在服务器端代码处理数据:

    $tst_msg = json_decode($received_text); //json decode 
$user_name = $tst_msg->name; //sender name
$typ = $tst_msg->type;       
$m = $tst_msg->m; //clickcoordinates
$w = $tst_msg->w;
$x = $tst_msg->x;// coordinates
$y = $tst_msg->y; // y-coordinate (user)
$e = $tst_msg->ev;
        //prepare data to be sent to client
if($typ == "move"){
        $response_text = mask(json_encode(array('me'=>$m,'we'=>$w,'ev'=>'moving','type'=>'usermsg', 'name'=>$user_name,  'x'=>$x,'y'=>$y)));
         send_message($response_text); //send data
         }
    else{
        $response_text = mask(json_encode(array('me'=>$m,'we'=>$w,'ev'=>'simple','type'=>'usermsg', 'name'=>$user_name,  'x'=>$x,'y'=>$y)));
        send_message($response_text); //send data
        }

现在这个代码由JS中的客户端以下列方式处理:

websocket.onmessage = function(ev) {
     var msg = JSON.parse(ev.data); //PHP sends Json data
     var wwx = msg.we;
     var mmx = msg.me;
     var ex = msg.ev;
     var uname = msg.name; //user name
     var xx = msg.x;
     var yy = msg.y;

     if(!(uname== "<?php echo $_COOKIE['name'];?>")){
    if(ex=="moving"){
    eone = $.Event('mousemove');
    eone.pageX = xx;
            eone.pageY = yy;
    etwo = $.Event('click');
    etwo.pageX = wwx;
            etwo.pageY = mmx;
    $(document).trigger(eone).trigger(etwo);


    }

这段代码没有触发任何东西。任何想法?什么可能是一个解决方法?

0 个答案:

没有答案