Question

类型错误：无法读取未定义的属性“emit”

2017-02-02

29298

javascript node.js sockets typeerror

问题是每当我尝试触发“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));
    }); 
}

附注：已编辑，现在此代码运行正常。我想建议阅读下面关于它的文章。

ES6 箭头函数和使用 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(){ /* */ }); 
});