简单对等，Socket.IO，Laravel 5.3 [英] Simple-peer, Socket.IO, Laravel 5.3
问题描述
我正在尝试使用Laravel 5.3，Socket.IO和Simple-Peer创建视频会议系统.我遵循了本教程: https://www.youtube.com/watch?v=ieBtXwHvoNk一切正常，但是现在我想使它自动化.我希望当两个用户转到这种链接:/vide-conference/some_video_conference_id时，他们会连接起来，以便视频会议可以开始.
I'm trying to create a video conferencing system using Laravel 5.3, Socket.IO and Simple-Peer. I followed this tutorial : https://www.youtube.com/watch?v=ieBtXwHvoNk and everything worked, but now I want to automatize this. I want that when two users go to this kind of link : /vide-conference/some_video_conference_id, they get connected, so the video conference can begin.
据我所知，如果我希望一个对等点在连接之前将数据发送到另一个，则需要一个信令服务器.我将使用Socket.IO.但是您能清楚地向我解释一下如何使Laravel 5.3正常运行吗?我在这里找到了一个示例(不使用laravel): https://bl.ocks.org/adammw/d9bf021c395835427aa0 ，但这是关于服务器端的客户端代码，我不明白，因为我不知道将服务器端代码放在哪里，因为我的资源中只有一个javascript文件(app.js) /assets/js使用gulp进行编译，以便浏览器可以读取它.
As far as I know, if I want a peer to send data to another one before they are connected, I need a signaling server. I'll use Socket.IO. But can you explain me clearly how can I have everything working with Laravel 5.3 ? I found an example here (not using laravel) : https://bl.ocks.org/adammw/d9bf021c395835427aa0, but it's talking about server side an client side code, and I don't understand because I don't know where to put the server side code, since I only have one javascript file (app.js) in my ressources/assets/js that gets compiled with gulp, so the browser can read it.
现在，我的app.js是:
Right now, my app.js is :
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是:
And my gulpfile is:
elixir(function(mix) {
mix.sass('app.scss')
.webpack('app.js');
});
我是laravel和nodejs的初学者，请告诉我如何将socket.IO集成到我的实际设置中！
I am a beginner in laravel and nodejs, please tell me how can I integrate socket.IO to my actual setup !
谢谢你，祝你有美好的一天！
Thank you and have a nice day !
更新:我尝试使用socket.io-client，添加以下代码行:
UPDATE : I tried to use socket.io-client, adding these lines of code :
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等.我已经说过，我不理解该服务器端代码是什么. 如果您有任何建议，将不胜感激！
UPDATE 2 : I searched for 2 days how to solve this error, but I just can't, I don't understand. Every solutions talk about server side code, http.listen, etc. And I already said that I don't understand what is this server side code. If you have any suggestion, it would be really appreciated!
更新3:我终于明白了这是服务器端代码.我在公共场所创建了一个nodejs文件夹，并使用以下简单代码创建了一个server.js文件:
UPDATE 3 : I finally understand what is this server side code. I created a nodejs folder in public, and I created a server.js file with this simple code :
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)中运行服务器，并且一切都在服务器端正常工作(它显示正在侦听.....")，但是对于客户端，我仍然遇到此404错误，我真的不知道为什么它不起作用，因为服务器应该解决此错误. 任何帮助表示赞赏！
Then i run the server in the cmd (node server.js), and everything works for server side (it says "Listening....."), but I still get this 404 error for the client, and I really have no idea why it doesn't work, since the server should solve this error. Any help is appreciated !
推荐答案
我认为您的前端已被浏览器阻止.这是由于Cors引起的.CORS代表跨域资源共享(CORS).要了解更多信息，请 https://developer.mozilla.org/zh-CN /docs/Web/HTTP/CORS
I think your front-end is being blocked by the browser. This is due to Cors.CORS stands for Cross-Origin Resource Sharing (CORS). To know more https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
解决方案:
使用cors npm库在服务器中启用cors
Solution:
use cors npm library to enable cors in your server
示例:
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
这篇关于简单对等，Socket.IO，Laravel 5.3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
