我正在尝试使用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中有一个javascript文件(app.js),该文件已使用gulp编译,因此浏览器可以读取它。
现在,我的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:我终于明白了这是服务器端代码。我在公共场所创建了一个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(节点server.js)中运行服务器,并且一切都在服务器端正常工作(它显示“ Listening .....”),但是对于客户端,我仍然会收到此404错误,不知道为什么它不起作用,因为服务器应该解决此错误。任何帮助表示赞赏!
我认为您的前端已被浏览器阻止。这是由于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);