samedi 31 mars 2018

socket.io repeatedly update change

I was trying to use socket.io to make a real-time collaboration editor with two different WYSIWYG Editors called summernote and froala. Server and client side both can receive and send content, however, it repeatedly refreshes stuff and I don't know why. Any advice? Thanks!

Here is part of my code: Server side:

var express = require('express'), 
app = express(),
http = require('http'),
io = require('socket.io');

var server = http.createServer(app);
var io = require('socket.io').listen(server);
server.listen(8000);
app.use(express.static(__dirname + '/public'));
console.log("Server running on 127.0.0.1:8000");


// event-handler for new incoming connections
io.on('connection', function (socket) {

   // first send the history to the new client
   socket.on("summer_change", function (data) {
    io.sockets.emit('summer_change', {content: data.content});
   });



   socket.on("text_change", function (data) {
    io.sockets.emit('text_change', {content: data.content});
   });
});

Client:

document.addEventListener("DOMContentLoaded", function() {


// get canvas element and create context
   var socket  = io.connect();
   var text = {
       text: ''
   };
   $(function() {
    $('#text').froalaEditor()
  });
   //Update summer
   $('#summernote').on('summernote.change', function(we, contents, $editable) {
      console.log('summernote content is changed:'+$('#summernote').summernote('code'));
      var contents = $('#summernote').summernote('code')
      socket.emit("summer_change",{content:contents});
   });
   // Change summer content from server
   socket.on("summer_change", function (data){
      console.log("Back from server! ");
      $('#summernote').summernote('code', data.content);
   });

   $('#text').froalaEditor().on('froalaEditor.contentChanged', function (e, editor) {
      var contents=editor.html.get();
      socket.emit("text_change",{content:contents});
    })

   socket.on("text_change", function (data){
      console.log("Back from server! ");
      $('#text').froalaEditor('html.set', data.content);
   });
});




Aucun commentaire:

Enregistrer un commentaire