nodejs + socketio + peerjs - 一个简单的代码不起作用答案

【问题标题】：nodejs + socketio + peerjs - a simple code not workingnodejs + socketio + peerjs - 一个简单的代码不起作用
【发布时间】：2021-09-08 16:51:12
【问题描述】：

我一直在处理制作一个简单的样板代码来工作。 nodejs 服务器已在本地托管。我能够成功地使用 socket.io 建立套接字连接。但无论如何，使用 peerJS 的 webRTC 连接都没有启动。

下面的代码根本不起作用，回调没有被触发。我已经尝试了所有可能的方法，但没有任何帮助。谁能帮我找到线索？

公司代理在这方面有什么作用吗？我正在使用我的公司机器，该机器设置了默认代理并已禁用。

myPeer.on('open', id => {});

请在下面找到完整的代码。

服务器端：

const socket = require('socket.io');
const express = require('express');
const peer = require('peer');
const http = require('http');

const PORT = 9000;

const expressApp = express();
const expressServer = http.Server(expressApp);
const socketServer = socket(expressServer);
const peerServer = peer.ExpressPeerServer(expressServer, { debug: true });

expressApp.use('/peerjs', peerServer)
expressApp.get('/stream/:streamId', (req, res) => {
 res.render('stream', { streamId: req.params.streamId });
});

expressServer.listen(PORT);

socketServer.on("connection", (socket) => {
  socket.on('join-room', (roomId, peerId) => {
    socket.join(roomId);
    socket.to(roomId).emit('user-connected', peerId);
  });
});

客户端

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>streamophone</title>
  <script>const ROOM_ID = "<%= streamId %>";</script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
  <script src="../script.js"></script>
</head>
<body>
  <div id='video' style="display: flex; align-items: center; flex-direction: column;">
    <h1>New stream starts here! <%= streamId %></h1>
  </div>
</body>
</html>

js:

const setupSocketConnectionViaPeer = (socket, myPeer) => {
  myPeer.on('open', id => {
    console.log(id);
    socket.emit('join-room', ROOM_ID);
  });
};

const setupSocketEvents = (socket) => {
  socket.on('user-connected', (peerId) => {
    console.log('some-one else has been connected', peerId);
  });
}

document.addEventListener('DOMContentLoaded', async function () {
  const socket = io('/');
  const myPeer = new Peer(undefined, { path: '/peerjs', host: '/', port: 9000 });

  setupSocketConnectionViaPeer(socket, myPeer);
  setupSocketEvents(socket);
});

版本信息：

peer.js(front-end): 1.3.1
peer.js(back-end): 0.6.1
socket.io(front-end): N/A
socket.io(back-end): 4.2.0

【问题讨论】：

标签： javascript node.js socket.io peerjs

【解决方案1】：

我知道它已经有几个月了，但我只是偶然发现并测试了它。

除了您错过了在下一行中发送对等 ID 之外，其他似乎都还好。

socket.emit('join-room', ROOM_ID, id);

这些都是我跑的

peer-server.js

const socket = require('socket.io');
const express = require('express');
const peer = require('peer');
const http = require('http');

const PORT = 9000;

const expressApp = express();
const expressServer = http.Server(expressApp);
const socketServer = socket(expressServer, {
  path: '/socket.io'
});
const peerServer = peer.ExpressPeerServer(expressServer, { debug: true });

// View engine setup
expressApp.set('view engine', 'ejs');

expressApp.use(express.static('public'))

expressApp.use('/peerjs', peerServer)
expressApp.get('/stream/:streamId', (req, res) => {
 res.render('stream', { streamId: req.params.streamId });
});

expressServer.listen(PORT, (err) => {
  if (err) console.log(err);
  console.log(`Server running at http://localhost:${PORT}`);
})

socketServer.on("connection", (socket) => {
  socket.on('join-room', (roomId, peerId) => {
    console.log('someone joined the room ', roomId, peerId);
    socket.join(roomId);
    socket.to(roomId).emit('user-connected', peerId);
  });
});

/public/script.js

console.log('JS loaded');

const setupSocketConnectionViaPeer = (socket, myPeer) => {
  myPeer.on('open', id => {
    console.log('Peer ID:', id);
    socket.emit('join-room', ROOM_ID, id);
  });
};

const setupSocketEvents = (socket) => {
  socket.on('user-connected', (peerId) => {
    console.log('some-one else has been connected', peerId);
    const userElement = document.createElement('div')
    userElement.innerText = `New user connected : ${peerId}`
    
    const userListElement = document.getElementById('userList')
    userListElement.appendChild(userElement)
  });
}

document.addEventListener('DOMContentLoaded', async function () {
  const socket = io('/');
  const myPeer = new Peer(undefined, { path: '/peerjs', host: '/', port: 9000 });

  setupSocketConnectionViaPeer(socket, myPeer);
  setupSocketEvents(socket);
});

/views/stream.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>streamophone</title>
  <script>const ROOM_ID = "<%= streamId %>";</script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
  <script src="/script.js"></script>
</head>
<body>
  <div id='video' style="display: flex; align-items: center; flex-direction: column;">
    <h1>New stream starts here! <%= streamId %></h1>
    <div id="userList"></div>
  </div>
</body>
</html>

package.json

{
  "name": "peerjs-socketio",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "nodemon peer-server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.6",
    "express": "^4.17.2",
    "nodemon": "^2.0.15",
    "peer": "^0.6.1",
    "socket.io": "^4.4.1"
  }
}

测试

npm i
npm run dev

使用浏览器访问 => http://localhost:9000/stream/1

【讨论】：