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