web-dev-qa-db-fra.com

TypeError: Impossible de lire la propriété 'émettre' de non seulement

Le problème est que, chaque fois que j'essaie de déclencher l'événement "this.io.emit", une erreur TypeError se produit. Cela donne seulement pendant que j'écris cette instruction "this.io.emit" dans le bloc "socket.on", sinon, si je l'écris en dehors de ce bloc, cela ne génère aucune erreur.

Il s'agit du fichier server.js principal pour appeler les autres bibliothèques:

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`);
    });
}}

mon code côté serveur est: 

'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;

J'ai également essayé d'accéder à "this.users.The longueur" à l'intérieur de socket.on l'instruction et il a généré le même TypeError: impossible de lire la longueur de la propriété. Je ne sais pas pourquoi cela se produit. S'il vous plaît aidez-moi à résoudre ce problème.

Côté client:

        <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>
javascriptnode.jssocketstypeerror
5
sagar

Le contexte de this est un problème dans votre code. Pour transmettre le contexte actuel, utilisez bind ou la fonction Arrow. En javascript, la valeur de this est définie par comment vous avez appelé la fonction , qui dans votre cas est socket object. 

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 .: Edité, maintenant ce code fonctionne bien. Je voudrais suggérer le post ci-dessous décrit à ce sujet.

Quelles sont les différences (le cas échéant) entre les fonctions de flèche ES6 et les fonctions liées à Function.prototype.bind?

5
Abhinav Galodha

utilisez io.emit () au lieu de socket.broadcast.emit () 

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

En effet, le contexte de ceci est différent pour la fonction interne.

Essayer:

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