Vinicius

app/Providers/EventServiceProvider.php

@@ -25,7 +25,7 @@ class EventServiceProvider extends ServiceProvider
      */
     public function boot()
     {
-        parent::boot();
+        //parent::boot();
 
         //
     }

package.json

@@ -21,7 +21,9 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.1",
+    "express": "^4.17.1",
     "mxgraph": "file:mxgraph",
-    "save-svg-as-png": "^1.4.17"
+    "save-svg-as-png": "^1.4.17",
+    "socket.io": "^4.4.0"
   }
 }

public/js/Compiler.js

@@ -718,6 +718,10 @@ function updateSaveButtonInFrontEnd(saved) {
         saveOntology.classList.add("saved");
         saveOntology.innerHTML = message;
         saveOntology.prepend(icon);
+
+        if (document.getElementById('id').value > 0) {
+            socket.emit('updateOntology', document.getElementById('id').value);
+        }
     } else {
         if (getLanguage() == "pt")
             message = "Alterações não salvas. Clique aqui para salvar";

public/js/OntologyManager.js

@@ -1,5 +1,9 @@
 var ontologyName = document.getElementById("ontology-name");
 
+const ip_address = '127.0.0.1';
+const socket_port = '3000'; // porta node
+let socket = io(ip_address + ":" + socket_port);
+
 function saveName(event) {
     if (event.key == 'Enter') {
         document.getElementById('save-ontology').click();
@@ -38,13 +42,14 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // Fires the Ajax request when the button is clicked
     // Open the selected ontology
-    $(".openOntology").click(function () {
+
+    function updateOntology(id) {
         $.ajax({
             /* the route pointing to the post function */
             url: '/openOntology',
             type: 'POST',
             /* send the csrf-token and the input to the controller */
-            data: { _token: CSRF_TOKEN, id: this.getAttribute('id') },
+            data: { _token: CSRF_TOKEN, id: id },
             dataType: 'JSON',
             /* remind that 'data' is the response of the OntologyController */
             success: function (data) {
@@ -94,6 +99,16 @@ document.addEventListener("DOMContentLoaded", function () {
                 updateSaveButtonErrorInFrontEnd();
             }
         })
+    }
+
+    $(".openOntology").click(function () {
+        updateOntology(this.getAttribute('id'));
+    });
+
+    socket.on('updateOntology', (ontologyID) => {
+        if (ontologyID == document.getElementById('id').value) {
+            updateOntology(document.getElementById('id').value);
+        }
     });
 });
 

resources/views/index.blade.php

@@ -1105,6 +1105,7 @@
 <script type="text/javascript" src="{{asset('js/Compiler.js')}}"></script>
 <script type="text/javascript" src="{{asset('js/Converter.js')}}"></script>
 <script type="text/javascript" src="{{asset('js/ClassExpressionEditor.js')}}"></script>
+<script src="https://cdn.socket.io/4.0.1/socket.io.min.js" integrity="sha384-LzhRnpGmQP+lOvWruF/lgkcqD+WDVt9fU3H4BWmwP5u5LTmkUGafMcpZKNObVMLU" crossorigin="anonymous"></script>
 <script type="text/javascript" src="{{asset('js/OntologyManager.js')}}"></script>
 <script type="text/javascript" src="{{asset('js/Cell.js')}}"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous">

routes/web.php

@@ -67,6 +67,7 @@
 
     // Ontologies CRUD
     Route::resource('/ontologies', OntologyController::class)->middleware('can:eModelador');
+
     Route::get('/ontologies/download/{userId}/{ontologyId}', [OntologyController::class, 'downloadXML'])->name('ontologies.download')->middleware('can:eModelador');
     Route::get('/ontologies/downloadOWL/{userId}/{ontologyId}', [OntologyController::class, 'downloadOWL'])->name('ontologies.downloadOWL')->middleware('can:eModelador');
     Route::get('/ontologies/downloadSVG/{userId}/{ontologyId}', [OntologyController::class, 'downloadSVG'])->name('ontologies.downloadSVG')->middleware('can:eModelador');

server.js

@@ -0,0 +1,25 @@
+const express = require('express');
+const app = express();
+const server = require('http').createServer(app);
+const io = require('socket.io')(server, {
+    cors: { origin: "*"}
+});
+
+io.on('connection', (socket) => {
+    //console.log('Conectado');
+
+    socket.on('updateOntology', (ontologyID) => {
+        //console.log(ontologyID);
+
+        //io.sockets.emit('updateOntology', ontologyID)
+        socket.broadcast.emit('updateOntology', ontologyID)
+    });
+
+    socket.on('disconnect',  (socket) => {
+        //console.log('Desconectado');
+    });
+})
+
+server.listen(3000, () => {
+    console.log('Servidor iniciado.');
+})