TypeError：无法读取未定义的属性“发出”

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;

我还尝试访问 socket.on 语句中的“this.users.The length”，它生成了相同的 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

这是因为 this 的上下文对于内部函数是不同的。

试试：

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

Answer 3

使用 io.emit() 而不是 socket.broadcast.emit()

io.on('connection', function(socket){
  socket.broadcast.emit('request', /* */); 
  io.emit('broadcast', /* */); 
  socket.on('reply', function(){ /* */ }); 
});