为什么发送者也会收到 socket.broadcast.emit 事件？答案

【问题标题】：Why the sender recieve the socket.broadcast.emit event also?为什么发送者也会收到 socket.broadcast.emit 事件？
【发布时间】：2021-11-20 23:49:48
【问题描述】：

这是我的服务器代码：

require('dotenv-flow').config();
const express = require('express');
const app = express();
const http =require('http');
const httpServer= http.createServer(app);
const io = require('socket.io')(httpServer, {
    allowEIO3: true
});
let Test=require('./test/Test');

httpServer.listen(process.env.REACT_APP_SOCKET_PORT, () =>{
  console.log('Express server is running on localhost:'+process.env.REACT_APP_SOCKET_PORT);
});
io.of("/test").on("connection",(socket)=>{
    let test=new Test(socket);
})

Test.js：

class Test{
    constructor(socket){
        console.log("Test:Connection established");
        socket.on("askConnect",()=>{
            console.log("Test:askConnect event received.")
            socket.broadcast.emit("requestConnect", {});
        });
    }    
}
module.exports=Test;

还有我的客户代码：

import io from 'socket.io-client';
export default function A(){
    let peerName;
    let sUsrAg = navigator.userAgent;
    let socket = io.connect(process.env.REACT_APP_SOCKET_URL+"test", { transports: ['websocket'] });
    socket.on("requestConnect",()=>{
        console.log(peerName+' received request connect event');
    })
    if (sUsrAg.indexOf("Chrome")>-1){
        peerName="Chrome";
    }else {
        peerName="Firefox";
    }
    let go=()=>{
        socket.emit('askConnect');
    }
    return(
        <button onClick={go}>Go</button>
    ); 
}

我用 2 个浏览器浏览网页。

我希望当我点击“开始”按钮时，socket.on("requestConnect",...) 应该只在其他浏览器中触发。

其实socket.on("requestConnect",...)在两个浏览器中都会被触发。

发生了什么事？

【问题讨论】：

标签： javascript node.js reactjs express socket.io

【解决方案1】：

经过几次尝试，当我将客户端代码更改为如下时，发送方不再收到socket.on("requestConnect",...)事件。

import io from 'socket.io-client';
import { useEffect,useState } from 'react';
export default function A(){
    let peerName;
    const[socket,setSocket]= useState();
    let sUsrAg = navigator.userAgent;    
    if (sUsrAg.indexOf("Chrome")>-1){
        peerName="Chrome";
    }else {
        peerName="Firefox";
    }
    useEffect(()=>{
        let temp=io.connect(process.env.REACT_APP_SOCKET_URL+"test", { transports: ['websocket'] });
        temp.on("requestConnect",(remotePeerName)=>{
            console.log('Received request connect event from '+remotePeerName);
        })
        setSocket(temp);
    },[])
    let go=()=>{
        socket.emit('askConnect',peerName);
    }
    return(
        <button onClick={go}>Go</button>
    ); 
}

但我不知道为什么。

【讨论】：