Question

我尝试使用Laravel 5.3，Socket.IO和Simple-Peer创建视频会议系统。我遵循了本教程：https://www.youtube.com/watch?v=ieBtXwHvoNk并且一切正常，但现在我想自动化这个。我希望当两个用户访问这种链接时：/ vide-conference / some_video_conference_id，它们会连接，因此视频会议可以开始。

据我所知，如果我希望对等方在连接之前将数据发送到另一个，我需要一个信令服务器。我将使用Socket.IO。但是你能清楚地解释一下我怎样才能让所有东西都与Laravel 5.3一起工作？我在这里找到了一个例子（不使用laravel）：https://bl.ocks.org/adammw/d9bf021c395835427aa0，但是它在谈论服务器端和客户端代码，我不明白，因为我不知道在哪里把服务器端代码，因为我在我的ressources / assets / js中只有一个用gulp编译的javascript文件（app.js），所以浏览器可以读取它。

现在，我的app.js是：

var getUserMedia = require('getusermedia')

getUserMedia({ video: true, audio: false }, function (err, stream) {
  if (err) return console.error(err)

  var Peer = require('simple-peer')
  var peer = new Peer({
    initiator: location.hash === '#init',
    trickle: false,
    stream: stream
  })

  peer.on('signal', function (data) {
    document.getElementById('yourId').value = JSON.stringify(data)
  })

  document.getElementById('connect').addEventListener('click', function () {
    var otherId = JSON.parse(document.getElementById('otherId').value)
    peer.signal(otherId)
  })

  document.getElementById('send').addEventListener('click', function () {
    var yourMessage = document.getElementById('yourMessage').value
    peer.send(yourMessage)
  })

  peer.on('data', function (data) {
    document.getElementById('messages').textContent += data + '\n'
  })

  peer.on('stream', function (stream) {
    var video = document.createElement('video')
    document.body.appendChild(video)

    video.src = window.URL.createObjectURL(stream)
    video.play()
  })
})

我的观点是：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <label>Your ID:</label><br/>
    <textarea id="yourId"></textarea><br/>
    <label>Other ID:</label><br/>
    <textarea id="otherId"></textarea>
    <button id="connect">connect</button><br/>

    <label>Enter Message:</label><br/>
    <textarea id="yourMessage"></textarea>
    <button id="send">send</button>
    <pre id="messages"></pre>

    <script src="bundle.js" charset="utf-8"></script>
  </body>
</html>

我的gulpfile是：

elixir(function(mix) {
    mix.sass('app.scss')
        .webpack('app.js');
});

我是laravel和nodejs的初学者，请告诉我如何将socket.IO集成到我的实际设置中！

谢谢你，祝你有愉快的一天！

更新：我尝试使用socket.io-client，添加以下代码行：

var io = require("socket.io-client");
var client = io.connect("127.0.0.1:8080/LaravelAppFolder");
client.on('connect',function() {
    client.emit("test","foo");
});

但是我收到了这个错误：

polling-xhr.js?0757:250 GET http://127.0.0.1:8080/socket.io/?EIO=3&transport=polling&t=LUpVKNI 404 (Not Found)

我不知道如何解决！

更新2：我搜索了2天如何解决这个错误，但我不能，我不明白。每个解决方案都谈论服务器端代码，http.listen等。我已经说过，我不明白这个服务器端代码是什么。如果您有任何建议，我们将非常感激！

更新3：我终于明白这个服务器端代码是什么了。我在public中创建了一个nodejs文件夹，并用这个简单的代码创建了一个server.js文件：

var express = require('express');
var app     = express();
var server  = require('http').createServer(app);
var io      = require('socket.io').listen(server);

const redis =   require('redis');
const client =  redis.createClient();

server.listen(8080);

console.log("Listening.....");

io.on('connection', function(socket){
  console.log('a user connected');
});

然后我在cmd（node server.js）中运行服务器，一切都适用于服务器端（它说＆＃34;听力.....＆＃34;），但我仍然得到404错误对于客户端，我真的不知道它为什么不起作用，因为服务器应该解决这个错误。任何帮助表示赞赏！

Answer 1

我认为您的前端已被浏览器阻止。这是由于Cors所致。CORS代表跨域资源共享（CORS）。要了解更多https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

解决方案：使用cors npm库在服务器中启用cors

示例：

var express = require('express')
var cors = require('cors')
var app = express()
var server  = require('http').createServer(app);
var io      = require('socket.io').listen(server);

//use cors as a middleware
app.use(cors())

//use socket connection

io.on('connection', function(socket){
  console.log('Made Connection',socket.id);
});

//listen to server
server.listen(8080);

源代码： https://github.com/vj-abishek/facetime-server

Simple-peer，Socket.IO，Laravel 5.3

1 个答案: