Question

我试图使用socket.io与两个不同的WYSIWYG编辑器（称为summernote和froala）建立实时协作编辑器。服务器端和客户端都可以接收和发送内容，但是，它反复刷新内容，我不知道为什么。有什么建议？谢谢！

以下是我的代码的一部分：服务器端：

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});
   });
});

客户：

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);
   });
});

socket.io反复更新更改

0 个答案: