首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Simple-peer,Socket.IO,Laravel 5.3

Simple-peer,Socket.IO,Laravel 5.3
EN

Stack Overflow用户
提问于 2016-10-11 17:44:10
回答 1查看 3.3K关注 0票数 2

我正在尝试使用Laravel5.3、Socket.IO和Simple-Peer创建一个视频会议系统。我遵循了这个教程:https://www.youtube.com/watch?v=ieBtXwHvoNk和一切工作正常,但现在我想将其自动化。我希望当两个用户转到这样的链接: /vide- conference /some_ video _conference_id时,他们会连接起来,这样视频会议就可以开始了。

据我所知,如果我想让一个对等体在连接之前向另一个对等体发送数据,我需要一个信令服务器。我会用Socket.IO,但是你能解释清楚我怎么才能在Larave5.3中让所有的东西都工作吗?我在这里找到了一个例子(不是使用laravel):https://bl.ocks.org/adammw/d9bf021c395835427aa0,但它讨论的是服务器端客户端代码,我不明白,因为我不知道将服务器端代码放在哪里,因为我的ressource/ gets /js中只有一个javascript文件(app.js),它是用gulp编译的,所以浏览器可以读取它。

现在,我的app.js是:

代码语言:javascript
复制
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()
  })
})

我的观点是:

代码语言:javascript
复制
<!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>

我的插口文件是:

代码语言:javascript
复制
elixir(function(mix) {
    mix.sass('app.scss')
        .webpack('app.js');
});

我是laravel和nodejs的初学者,请告诉我如何将socket.IO集成到实际安装中!

谢谢你,祝你有愉快的一天!

更新:我尝试使用socket.io-client,添加了以下几行代码:

代码语言:javascript
复制
var io = require("socket.io-client");
var client = io.connect("127.0.0.1:8080/LaravelAppFolder");
client.on('connect',function() {
    client.emit("test","foo");
}); 

但是我得到了这个错误:

代码语言:javascript
复制
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文件:

代码语言:javascript
复制
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)中运行服务器,服务器端一切正常(它说“正在侦听……”),但我仍然在客户端收到这个404错误,我真的不知道为什么它不能工作,因为服务器应该解决这个错误。如有任何帮助,我们不胜感激!

EN

回答 1

Stack Overflow用户

发布于 2020-01-29 22:32:31

我认为你的前端被浏览器拦截了。这要归功于CORS,CORS代表跨域资源共享(CORS)。了解更多https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

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

示例:

代码语言:javascript
复制
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

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39974510

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档