Socket.ioは、私がセットアップsocket.ioにしようとしている二つのメッセージ

Question

を送信し、ここで私のserver.js

const app = require('express')(); 
const http = require('http').Server(app); 
const io = require('socket.io')(http, { path: '/websocket', origins:'*:*' }); 

io.on('connection', (socket) => { 
socket.send('Hi'); 
socket.on('message', (message) => { 
    console.log(message); 
    socket.emit('hello', `New: ${message}`); 
}); 
    console.log('a user connected'); 
}); 

http.listen(3030, function(){ 
    console.log('listening on *:3030'); 
}); 

を、私の単純なクライアントの一部です：

var socket = io('https://*******.com', { 
    secure: true, 
    path: '/websocket' 
}); 

const input = document.getElementById('text'); 
const button = document.getElementById('button'); 
const msg = document.getElementById('msg'); 

button.onclick =() => { 
    socket.emit('message', input.value); 
    socket.on('hello', (text) => { 
     const el = document.createElement('p'); 
     el.innerHTML = text; 
     msg.appendChild(el); 
    }) 
} 

3回目にクリックすると3つのメッセージが返ってきます。私は間違っているの？私はサーバーにメッセージを送って、変更されたメッセージを返信したいと思います。 私はウェブソケットで新しいです。

助けてください。

P.S. socket.io v2.0.1

Answer 1

ボタンをクリックするたびにsocket.on()イベントハンドラが追加されます。したがって、ボタンを2回クリックすると、socket.on()イベントハンドラが重複しています。イベントが復帰すると、2つのイベントハンドラがそれぞれ呼び出され、重複したメッセージが表示されると思います。実際、メッセージは1つだけですが、イベントハンドラが重複しています。

イベントハンドラを別のイベントハンドラ内に追加することは、このような重複イベントハンドラのビルドアップにつながります。あなたは、コードが行っていることを正確に（言葉で）記述していないので、私は何を示唆するべきかを正確には知らない。通常は、ソケットが接続されているときにイベントハンドラを最初に1回だけ設定し、重複するハンドラを取得することはありません。

だから、おそらくそれは、これを変更するのと同じくらい簡単です：これまで

button.onclick =() => { 
    socket.emit('message', input.value); 
    socket.on('hello', (text) => { 
     const el = document.createElement('p'); 
     el.innerHTML = text; 
     msg.appendChild(el); 
    }) 
} 

：

button.onclick =() => { 
    socket.emit('message', input.value); 
} 

socket.on('hello', (text) => { 
    const el = document.createElement('p'); 
    el.innerHTML = text; 
    msg.appendChild(el); 
});