title: Socket.io broadcast only to the user who started the group
body: <p>Hey guys am trying to make a webrtc chat using socket. Io, and broadcast all the other clients stream to only the user who started the group, but all the other clients can get the stream of the user who started the group and not each other streams please I need help in fixing this</p>
  <p><strong>My socket code</strong></p>
  <pre><code>io.on('connection',socket =&gt;{
    socket.on('join-class',(classId,palsid)=&gt;{
        socket.join(classId)
        socket.to(classId).broadcast.emit('user-connected',palsid)
        
        socket.on('disconnect',()=&gt;{
            socket.to(classId).broadcast.emit('user-disconnect',palsid)
        })
    })
    
  })
  
  server.listen(4000, ()=&gt;{
      console.log('server is running on port 4000')
  })
  </code></pre>
  <p><strong>My frontend code</strong></p>
  <pre><code> import React from 'react'
  import io from 'socket.io-client'
  import Peer from 'peerjs'
  import './ClassWall.css'
  import { Modal, Button } from 'antd';
  import img from '../../uploads/349-3498013_laptop-personal-computer-diagram-computer-icons-download-laptop-clipart.png'
  
  const socket = io.connect('http://localhost:4000/')
  
  
  class LiveClass extends React.Component{
      constructor(){
          super()
          this.state = {
              userId :'',
              classStatus: '',
              videoSrc:'',
              visible: false
          }
      } 
      
      async componentDidMount(){
                  
          //set the user id of logedin user
          const videoGrid = document.getElementById('video-grid')
          const Myvideo = document.createElement('video')
          Myvideo.addEventListener('click',()=&gt;{
              console.log(Myvideo)
          })
          Myvideo.muted = true
  
          try {
              const response = await fetch('http://localhost:4000/Auth//UserID/id',{
                  headers:{token:localStorage.token}
              })
              const Parse = await response.json()
              this.setState({userId:Parse})
          } catch (error) {
                          
          }
          //get user id to connect through peer
          const myPeer = new Peer(this.state.userId,{
              host: '/',
              port:4001
          })
          //connect and share video stream
          try {
              const peers = {}
              navigator.mediaDevices.getUserMedia({
                  video:true,
                  audio:true
              }).then(stream =&gt;{
              addVideoStream(Myvideo,stream)
              
                  myPeer.on('call',call=&gt;{
                      call.answer(stream)
                      const video = document.createElement('video')
                      call.on('stream',userVideostream=&gt;{
                          addVideoStream(video,userVideostream)
                      })
                  })
              
                  socket.on('user-connected',userId=&gt;{
                      connectToNewUser(userId,stream)
                    console.log('newUser',userId)
                  })
              })
              
              socket.on('user-disconnect', userId=&gt;{
                  if(peers[userId])peers[userId].close()
              })
              
              myPeer.on('open',id=&gt;{
                  socket.emit('join-class',this.props.match.params.id,id)
              })
              //get user stream and connect
              function connectToNewUser(userId,stream){
                  const call  = myPeer.call(userId,stream)
                  const video = document.createElement('video')
                  video.setAttribute(&quot;class&quot;,`pointer`)
                  video.addEventListener('click',()=&gt;{
                      console.log(video)
                  })
                      call.on('stream',userVideostream=&gt;{
                          addVideoStream(video,userVideostream)
                      })
                  call.on('close',()=&gt;{
                      video.remove()
                  })
              
                  peers[userId]=call
              }
              
              //Add video stream
              function addVideoStream(video,stream){
                  const videoGrid = document.getElementById('video-grid')
                  video.srcObject = stream
                  video.addEventListener('loadedmetadata', () =&gt;{
                      video.play()
                  })
                  videoGrid.append(video)
              }
              
          } catch (error) {
              console.log('error',error)    
          }
          this.checkIfClassTrue()   
      }
  
      //check if its class
      checkIfClassTrue = async()=&gt;{
          const response = await fetch(`http://localhost:4000/liveclass/${this.props.match.params.id}`)
          const Parse = await response.json()
          this.setState({classStatus:Parse})
      }
   
      //modal
      showModal = () =&gt; {
          this.setState({
            visible: true,
          });
        };
      
        handleOk = e =&gt; {
          console.log(e);
          this.setState({
            visible: false,
          });
        };
      
        handleCancel = e =&gt; {
          console.log(e);
          this.setState({
            visible: false,
          });
        };
      
     
      render(){
          return(
              &lt;div&gt;
                 {
                     this.state.classStatus === 'Not found'?
                     'not found':
                     &lt;div&gt;
                         
                         &lt;div id=&quot;video-grid&quot;&gt;
                                  {/* &lt;img src={img}/&gt; */}
                              &lt;/div&gt;
                              &lt;Button type=&quot;primary&quot; onClick={this.showModal}&gt;
                          Open Modal
                          &lt;/Button&gt;
                          &lt;Modal
                          title=&quot;Basic Modal&quot;
                          visible={this.state.visible}
                          onOk={this.handleOk}
                          onCancel={this.handleCancel}
                          &gt;
                          
                          &lt;/Modal&gt;
                     &lt;/div&gt;
                 }
              &lt;/div&gt;
          )
      }
      }
  
  export default LiveClass
  
  
  </code></pre>