Question

我在JavaScript类和socket.io'connect'事件中遇到了正确的上下文问题。

我的课看起来像这样：

<div class="holder"></div>
<div class="message-form ">
<?php $form = ActiveForm::begin([
    'id' => 'updates-form',
    'options' => [
        'validationUrl' => 'url/validate'
    ]
]);  
<div class="container-fluid" id="wrap-picker">
<div id="placer"></div>
<div class="row media">
<div id="camera-wrap" class="col-xs-8 col-sm-5">
<?= $form->field($model, 'file',['inputOptions' => ['accept'=>"image/*;capture=camera", 'class' => 'do-camera']])->fileInput()->label('') ?>             
</div>
<div class="col-xs-4 col-sm-7">
<i id="media-remove"><i class="fa fa-remove fw" ></i> Remove</i>
</div>
</div>          
<div class="center">
<i id="camera-picker" class="media-picker"> <i class="hint">Picture</i>  
<i class="fa fa-camera-retro" ></i> </i> &nbsp; &nbsp; &nbsp; <i id="video-picker" class="media-picker"><i class="hint">Video</i> <i class="fa fa-video-camera" ></i></i>
</div>
</div>  
</div>
<?php ActiveForm::end();?>
</div>
<?php
$js = <<< JS
function hideMedia(){
    $(".media").appendTo(".holder");
    $(".media").hide();
}
hideCamera();
$(".media-picker").click(function(){
//ensure .media is visible and child to #placer before calling trigger
if($("#wrap-picker").find($(". media")).length !== 1){
     $(".media").fadeIn();
     $(". media").appendTo("#placer");
 }         
 $(".do-camera").trigger('click');
});
$("#video-picker").click(function(){
    $(".do-camera").removeAttr('accept');
    $(".do-camera").attr("accept", "video/*;capture=camcoder");
});
$("#camera-picker").click(function(){
    $(".do-camera").removeAttr('accept');
    $(".do-camera").attr("accept", "image/*;capture=camera");
    });
$("#media-remove").click(function(){
    hideMedia();
});  
JS;  
$this->registerJs($js);
?>

在“playerLeave”函数中，我可以使用“this.id”访问套接字ID。但是要访问“_players”地图，我需要我得到的类的上下文，如果我将“addListeners”函数更改为：

class GameSession {

   constructor(gameSessionId) {
       this._gameSessionId = gameSessionId;
       this._players = new Map();
   }

   addPlayer(socketId,player) {
       this._players.set(socketId,player);
       this.addListeners(player);
   }

   addListeners(player) {
       player.socket.on('disconnect',this.playerLeave);
   }

   playerLeave () {
       // ##### here is my Problem
   }
}

但是由此我松开了Event的上下文，因此可以调用“this.id”来接收套接字ID。

我怎样才能同时获得两者？

Answer 1

你可以尝试这样的事情：

addListeners(player) {
  player.socket.on('disconnect', this.playerLeave.bind(this));
}

playerLeave (socket) {...}

Answer 2

我遇到了同样的问题，并且找到了解决方案。（希望您也找到了！）

您只需要像这样绑定两个实例：

   addListeners(player) {
       var playerSocket = player.socket;
       playerSocket.on('disconnect',this.playerLeave.bind(playerSocket, this));
   }

该类实例将作为参数传递给您的socketIO事件：

   playerLeave(gameSessionInstance) {
       console.log('Bye '+this.id);
       gameSessionInstance.removePlayer(this.id); // if you have a method called removePlayer for example
   }

我怎样才能获得Node.js类和socket.io事件上下文？

2 个答案: