TypeError：未定義の 'emit'プロパティを読み取ることができません

Question

問題は「this.io.emit」イベントを発生させようとするたびに、TypeErrorが発生することです。これは、 "socket.on"ブロックの中にこの文 "this.io.emit"を書き込む間だけ得ます。このブロックの外側に書き込むとエラーは発生しません。

これは、他のライブラリを呼び出すためのメインserver.jsファイルです：

const express = require('express'), 
http = require('http'), 
socketio = require('socket.io'); 

class App{ 

constructor() 
{ 
    this.port = process.env.PORT || 81; 
    this.host = `localhost`;   
    this.app = express(); 
    this.http = http.Server(this.app); 
    this.socket = socketio(this.http); 
} 
appConfig(){ 
    new config(this.app); 
} 
appRoutes(){ 
    new routes(this.app,this.socket).routesDefault(); 
} 
appDefault(){ 
    this.appConfig(); 
    this.appRoutes(); 
    this.http.listen(this.port,this.host,()=> { 
     console.log(`Listening`); 
    }); 
}} 

私のサーバー側のコードは次のとおりです。

'use strict'; 
class Routes { 

constructor(app,socket) { 
    this.app = app; 
    this.io = socket; 
    this.users=[]; 
} 

routesTemplate() 
{ 
    this.app.get('/',function(req,res){ 
     res.render('index'); 
    }); 
} 

socketEvents() 
{ 
    this.io.on('connection',(socket) => { 
     socket.on('send message',function(data) 
     { 
      this.io.emit('new message',data);//here the error lies. 
     }); 
    }); 
} 
routesDefault() 
{ 
    this.routesTemplate(); 
    this.socketEvents(); 
}} 
module.exports = Routes; 

私はまた、「this.users.The長さにアクセスしようとしました"socket.onステートメント内で、同じTypeErrorを生成しました。プロパティの長さを読み取ることができません。なぜそれが起こっているのか分かりません。この問題を解決するのを手伝ってください。

クライアント側：

 <script> 
     $(function($){ 
      var socket = io.connect(); 
      var $messageForm = $('#send-message'); 
      var $messageBox = $('#message'); 
      var $chat = $('#chat'); 

      $messageForm.submit(function(e){ 
       e.preventDefault(); 
       socket.emit('send message',$messageBox.val()); 
       $messageBox.val(""); 
      }); 
      socket.on('new message',function(data){ 
       $chat.append(data+ "<br/>"); 
      }); 
     }); 
    </script> 

Answer 1

thisのコンテキストは、あなたのコード内の問題です。現在のコンテキストを渡すには、bindまたはArrow関数を使用します。 JavaScriptで、thisの値は、によって定義されます。という関数は、socketというオブジェクトです。

socketEvents() 
{ 
    this.io.on('connection',(socket) => { 
     socket.on('send message',function(data) 
     { 
      this.io.emit('new message',data);//here the error lies. 
     }bind(this)); 
    }); 
} 

P.S .:このコードは正しく編集されました。私はそれについて下記の投稿を提案したいと思います。

What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?

Answer 2

このコンテキストは内部機能のために異なるからです。

試してみてください。

socketEvents() 
{ 
    this.io.on('connection',(socket) => { 
     socket.on('send message',function(data) 
     { 
      socket.emit('new message',data);//here the error lies. 
     }); 
    }); 
}