通过 peerjs socketio 加入随机房间答案

【问题标题】：Joining random room by peerjs socketio通过 peerjs socketio 加入随机房间
【发布时间】：2020-11-23 23:28:04
【问题描述】：

我正在制作聊天轮盘网站。现在每当我发送链接时，其他用户都可以连接到我的通话，但我希望它按以下方式工作：每当用户单击按钮时，它都会找到随机用户并将其加入该房间。如何在 socketio 和 peerjs 库中实现此功能。

server.js

if (process.env.NODE_ENV !== "production") {
  require('dotenv').config();
}
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const {v4:uuidV4} = require('uuid');
const {MongoClient} = require('mongodb');


const client = new MongoClient(process.env["DB_URL"], {
  useUnifiedTopology: true 
});



app.set('view engine', 'ejs');
app.use(express.static('public'));

// app.get('/', (req, res)=>{
//   res.render("landing")
// });


app.get('/', (req, res)=>{ 
  res.render('landing');
});

app.get('/chat', (req, res)=>{
    res.redirect(`/${uuidV4()}`)
});

app.get('/:room', (req, res)=>{
    res.render('room', {roomId: req.params.room});
});


io.on('connection', socket => {
  let room = '';
    socket.on('join-room', (roomId, userId) => {
      socket.join(roomId)
      socket.to(roomId).broadcast.emit('user-connected', userId)
      socket.on('message', message =>{
          io.to(roomId).emit('createMessage', message);
      });


      socket.on('disconnect', () => {
      socket.to(roomId).broadcast.emit('user-disconnected', userId)
        
      })
    })
  })




const port = process.env.port || 3000;
server.listen(port, ()=> {
  console.log("3000")
});

script.js

const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myPeer = new Peer(undefined, {
  host: '/',
  port: '3001'
})

let myVideoStream;
const myVideo = document.createElement('video')
myVideo.muted = true
const peers = {};
navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
}).then(stream => {
  myVideoStream = stream;
  addVideoStream(myVideo, stream)

  myPeer.on('call', call => {
    call.answer(stream)
    const video = document.createElement('video')
    call.on('stream', userVideoStream => {
      addVideoStream(video, userVideoStream)
    })
  })

  socket.on('user-connected', userId => {
    connectToNewUser(userId, stream)
  })
  let text = $('input');

$('html').keydown((e)=>{
  if(e.which == 13 && text.val().length !== 0){
    console.log(text.val());
    socket.emit('message', text.val());
    text.val('')
  }
});

socket.on('createMessage', message =>{
  $('ul').append(`<li class="message"><b>user</b><br/>${message}</li>`);
  scrollToBottom();
});
});

socket.on('user-disconnected', userId => {
  if (peers[userId]) peers[userId].close()
})

myPeer.on('open', id => {
  socket.emit('join-room', ROOM_ID, id)
})

function connectToNewUser(userId, stream) {
  const call = myPeer.call(userId, stream)
  const video = document.createElement('video')
  call.on('stream', userVideoStream => {
    addVideoStream(video, userVideoStream)
  })
  call.on('close', () => {
    video.remove()
  })

  peers[userId] = call
}

function addVideoStream(video, stream) {
  video.srcObject = stream
  video.addEventListener('loadedmetadata', () => {
    video.play()
  })
  videoGrid.append(video)
}


const scrollToBottom = () => {
  let d = $('.main__chat_window');
  d.scrollTop(d.prop("scrollHeight"));
}


const muteUnmute = () => {
  const enabled = myVideoStream.getAudioTracks()[0].enabled;
  if (enabled) {
    myVideoStream.getAudioTracks()[0].enabled = false;
    setUnmuteButton();
  } else {
    setMuteButton();
    myVideoStream.getAudioTracks()[0].enabled = true;
  }
}

const playStop = () => {
  console.log('object')
  let enabled = myVideoStream.getVideoTracks()[0].enabled;
  if (enabled) {
    myVideoStream.getVideoTracks()[0].enabled = false;
    setPlayVideo()
  } else {
    setStopVideo()
    myVideoStream.getVideoTracks()[0].enabled = true;
  }
}

const setMuteButton = () => {
  const html = `
    <i class="fas fa-microphone"></i>
    <span>Mute</span>
  `
  document.querySelector('.main__mute_button').innerHTML = html;
}

const setUnmuteButton = () => {
  const html = `
    <i class="unmute fas fa-microphone-slash"></i>
    <span>Unmute</span>
  `
  document.querySelector('.main__mute_button').innerHTML = html;
}

const setStopVideo = () => {
  const html = `
    <i class="fas fa-video"></i>
    <span>Stop Video</span>
  `
  document.querySelector('.main__video_button').innerHTML = html;
}

const setPlayVideo = () => {
  const html = `
  <i class="stop fas fa-video-slash"></i>
    <span>Play Video</span>
  `
  document.querySelector('.main__video_button').innerHTML = html;
}

【问题讨论】：

你能告诉我们你的尝试吗？
帮我解决这个问题。我在互联网上搜索了将近 3 天，但我找不到任何有用的东西

标签： javascript node.js socket.io webrtc peerjs

【解决方案1】：

您必须将所有 PeerJS Id 保存在数组中，然后选择一个随机 Id 并将其发送给客户端。如果任何用户断开连接，则从数组中删除 ID。

server.js

if (process.env.NODE_ENV !== "production") {
  require('dotenv').config();
}
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const {v4:uuidV4} = require('uuid');
const {MongoClient} = require('mongodb');


const client = new MongoClient(process.env["DB_URL"], {
  useUnifiedTopology: true 
});



app.set('view engine', 'ejs');
app.use(express.static('public'));

// app.get('/', (req, res)=>{
//   res.render("landing")
// });


app.get('/', (req, res)=>{ 
  res.render('landing');
});

app.get('/chat', (req, res)=>{
    res.redirect(`/${uuidV4()}`)
});

app.get('/:room', (req, res)=>{
    res.render('room', {roomId: req.params.room});
});

let Ids = []; // Creating Ids Array

io.on('connection', socket => {
  let room = '';
    socket.on('join-room', (roomId, userId) => {
      socket.join(roomId)
      Ids.push(userId); // Push Id in Ids Array when User Join
      socket.to(roomId).broadcast.emit('user-connected', userId)
      socket.on('message', message =>{
          io.to(roomId).emit('createMessage', message);
      });
      socket.on('getId',() =>{
          id = Ids[Math.floor(Math.random() * Ids.length)]; // Taking a Random Id
          io.to(roomId).emit('recieveId', {id:id,userId:userId}); //Sending The Id with The UserId
      });


      socket.on('disconnect', () => {
      socket.to(roomId).broadcast.emit('user-disconnected', userId)
      const index = Ids.indexOf(userId);
      if (index > -1) {
        Ids.splice(index, 1);
      } // removing Id From Ids Array When User Disconnect
      })
    })
  })
 //arr[Math.floor(Math.random() * arr.length)]; 



const port = process.env.port || 3000;
server.listen(port, ()=> {
  console.log("3000")
});

script.js

const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myPeer = new Peer(undefined, {
  host: '/',
  port: '3001'
})

let myVideoStream;
const myVideo = document.createElement('video')
myVideo.muted = true
const peers = {};
navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
}).then(stream => {
  myVideoStream = stream;
  addVideoStream(myVideo, stream)

  myPeer.on('call', call => {
    call.answer(stream)
    const video = document.createElement('video')
    call.on('stream', userVideoStream => {
      addVideoStream(video, userVideoStream)
    })
  })

  socket.on('user-connected', userId => {
    connectToNewUser(userId, stream)
    socket.emit('getId'); //sending GetId Event
  })
  let text = $('input');

$('html').keydown((e)=>{
  if(e.which == 13 && text.val().length !== 0){
    console.log(text.val());
    socket.emit('message', text.val());
    text.val('')
  }
});

socket.on('createMessage', message =>{
  $('ul').append(`<li class="message"><b>user</b><br/>${message}</li>`);
  scrollToBottom();
});
});

socket.on('user-disconnected', userId => {
  if (peers[userId]) peers[userId].close()
})

myPeer.on('open', id => {
  socket.emit('join-room', ROOM_ID, id)
  socket.on('reciveId', data => {
    if data['userId'] == id{
      connectToNewUser(data['id'],stream) // send Your Stream Here
    }
  }); // Recieving Recive Id Event
})

function connectToNewUser(userId, stream) {
  const call = myPeer.call(userId, stream)
  const video = document.createElement('video')
  call.on('stream', userVideoStream => {
    addVideoStream(video, userVideoStream)
  })
  call.on('close', () => {
    video.remove()
  })

  peers[userId] = call
}

function addVideoStream(video, stream) {
  video.srcObject = stream
  video.addEventListener('loadedmetadata', () => {
    video.play()
  })
  videoGrid.append(video)
}


const scrollToBottom = () => {
  let d = $('.main__chat_window');
  d.scrollTop(d.prop("scrollHeight"));
}


const muteUnmute = () => {
  const enabled = myVideoStream.getAudioTracks()[0].enabled;
  if (enabled) {
    myVideoStream.getAudioTracks()[0].enabled = false;
    setUnmuteButton();
  } else {
    setMuteButton();
    myVideoStream.getAudioTracks()[0].enabled = true;
  }
}

const playStop = () => {
  console.log('object')
  let enabled = myVideoStream.getVideoTracks()[0].enabled;
  if (enabled) {
    myVideoStream.getVideoTracks()[0].enabled = false;
    setPlayVideo()
  } else {
    setStopVideo()
    myVideoStream.getVideoTracks()[0].enabled = true;
  }
}

const setMuteButton = () => {
  const html = `
    <i class="fas fa-microphone"></i>
    <span>Mute</span>
  `
  document.querySelector('.main__mute_button').innerHTML = html;
}

const setUnmuteButton = () => {
  const html = `
    <i class="unmute fas fa-microphone-slash"></i>
    <span>Unmute</span>
  `
  document.querySelector('.main__mute_button').innerHTML = html;
}

const setStopVideo = () => {
  const html = `
    <i class="fas fa-video"></i>
    <span>Stop Video</span>
  `
  document.querySelector('.main__video_button').innerHTML = html;
}

const setPlayVideo = () => {
  const html = `
  <i class="stop fas fa-video-slash"></i>
    <span>Play Video</span>
  `
  document.querySelector('.main__video_button').innerHTML = html;
}

注意：请关注代码中的注释

【讨论】：