Простой одноранговый, сокет.Ввод-вывод, Laravel 5.3

#javascript #node.js #laravel #socket.io #p2p

#javascript #node.js #laravel #socket.io #p2p

Вопрос:

Я пытаюсь создать систему видеоконференцсвязи с использованием сокета Laravel 5.3.Ввод-вывод и простой одноранговый. Я следовал этому руководству: 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 , но речь идет о коде на стороне сервера и на стороне клиента, и я не понимаю, потому что я не знаю, куда поместить код на стороне сервера, поскольку у меня есть только один файл javascript (app.js ) в моих ресурсах / активах / 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>
  

И мой файл gulp:

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

Я новичок в laravel и nodejs, пожалуйста, скажите мне, как я могу интегрировать сокет.Ввод-вывод для моей фактической настройки!

Спасибо и хорошего дня!

ОБНОВЛЕНИЕ: я попытался использовать 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=3amp;transport=pollingamp;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 ), и все работает на стороне сервера (написано «Прослушивание …..»), но я все еще получаю эту ошибку 404 для клиента, и я действительно понятия не имею, почему это не работает, поскольку сервер должен решитьэта ошибка.
Любая помощь приветствуется!

Ответ №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