Enable Realtime Collaboration on Your App!

1 post Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

In this tutorial I showed you all how I made the HTML OnLive Debugger.

TogetherJS makes real time collaboration easy! Therefore we're going to use this amazing plugin so we can have real time code collaboration for our text editor.

So first we're going to begin with the Codemirror snipplet.
Code: Select all
<!DOCTYPE html>
    <html>
      <head>
        <title>Codemirror: HTML5 Preview</title>
        <meta charset='utf-8'>
        <meta name='viewport' content='initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='IE=9' />
        <link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
        <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
        <script src='http://codemirror.net/lib/codemirror.js'></script>
        <link rel='stylesheet'  href="http://codemirror.net/lib/codemirror.css">
        <link rel="stylesheet"  href="http://codemirror.net/addon/fold/foldgutter.css" />
        <script src='http://codemirror.net/javascripts/code-completion.js'></script>
        <script src='http://codemirror.net/javascripts/css-completion.js'></script>
        <script src='http://codemirror.net/javascripts/html-completion.js'></script>
        <script src='http://codemirror.net/mode/javascript/javascript.js'></script>
        <script src='http://codemirror.net/mode/xml/xml.js'></script>
        <script src='http://codemirror.net/mode/css/css.js'></script>
        <script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
        <script src='http://codemirror.net/addon/edit/closetag.js'></script>
        <script src='http://codemirror.net/addon/edit/matchbrackets.js'></script>
        <script src='http://codemirror.net/addon/selection/active-line.js'></script>
        <script src='http://codemirror.net/keymap/extra.js'></script>
        <script src='http://codemirror.net/addon/fold/foldcode.js'></script>
        <script src='http://codemirror.net/addon/fold/foldgutter.js'></script>
        <script src='http://codemirror.net/addon/fold/brace-fold.js'></script>
        <script src='http://codemirror.net/addon/fold/xml-fold.js'></script>
        <script src='http://codemirror.net/addon/fold/comment-fold.js'></script>
        <style type='text/css'>
          .CodeMirror {
            float: left;
            width: 50%;
            border: 1px solid black;
          }

          iframe {
            width: 49%;
            float: left;
            height: 300px;
            border: 1px solid black;
            border-left: 0;
          }
        </style>
      </head>
      <body>
        <div align='center'>
          <button class='undo'>Undo</button>
          <button class='redo'>Redo</button>
          <button class='jquery'>Add JQuery</button>
          <button class='bold'>Bold</button>
        </div>
        <textarea id='code' name='code'><!doctype html>
    <html>
      <head>
        <meta charset=utf-8>
        <title>HTML5 canvas demo</title>
        <style>p {font-family: monospace;}</style>
      </head>
      <body>
        <p>Canvas pane goes here:</p>
        <canvas id=pane width=300 height=200></canvas>

        <script>
          var canvas = document.getElementById('pane');
          var context = canvas.getContext('2d');

          context.fillStyle = 'rgb(250,0,0)';
          context.fillRect(10, 10, 55, 50);

          context.fillStyle = 'rgba(0, 0, 250, 0.5)';
          context.fillRect(30, 30, 55, 50);
        </script>
      </body>
    </html></textarea>

        <iframe id='preview'></iframe>

        <script type='text/javascript'>
          // Append JS library to HTML <head>
          function appendJSLib(txt) {
            var textArea = editor.getValue();
            var searchText = textArea.search('<head>');
            if(searchText>0) {
              txt = '<head>'+'\n'+txt;
              var updatedTextArea = textArea.replace('<head>',txt);
              editor.setValue(updatedTextArea);
            }
            else {
              reset();
              alert('WARNING! The <head&gt tag seems to be missing in your HTML. Although your code may still work, we highly recommened that you have a valid HTML syntax. Please refer to the new document of correct formatted');
              txt = txt+textArea;
              htmlEditor.setLine(0, txt);
              return false;
            }
          }

          // Add JQuery as JS Source
          $('.jquery').click(function() {
            txt = '<'+'script type=\'text/javascript\' src=\'http://code.jquery.com/jquery-latest.min.js\'>'+'</'+'script'+'>';
            appendJSLib(txt);
          });

          // Undo/Redo Initiation
          $('.undo').click(function() {
            editor.undo();
          });
          $('.redo').click(function() {
            editor.redo();
          });

          // Make selected text bold (If no text selected it adds the code and focus's cursor to center of tag)
          $('.bold').click(function() {
            // For codemirror & center cursor
            var selected_text = editor.getSelection();  // Need to grab the Active Selection
            console.log(selected_text);  // Active Selection

            editor.replaceSelection('', editor.getCursor());
            editor.replaceRange('<strong></strong>', editor.getCursor());
            editor.focus();
            var str = '</strong>';
            var mynum = str.length;
            var start_cursor = editor.getCursor();  // Need to get the cursor position
            console.log(start_cursor);  // Cursor position
            var cursorLine = start_cursor.line;
            var cursorCh = start_cursor.ch;

            // Code to move cursor back [x] amount of spaces. [x] is the data-val value.
            editor.setCursor({line: cursorLine , ch : cursorCh -mynum });
            editor.replaceRange(selected_text, editor.getCursor());
            editor.focus();
          });

          var delay;

          // Initialize CodeMirror editor
          var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
            mode: "text/html",
            tabMode: 'indent',
            styleActiveLine: true,
            lineNumbers: true,
            lineWrapping: true,
            autoCloseTags: true,
            foldGutter: true,
            dragDrop : true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
          });

          // Live preview
          editor.on('change', function() {
            clearTimeout(delay);
            delay = setTimeout(updatePreview, 300);
          });

          function updatePreview() {
            var previewFrame = document.getElementById('preview');
            var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
            preview.open();
            preview.write(editor.getValue());
            document.title = $('#preview').contents().find('title').html();
            if ( document.title === 'undefined' ) {
              document.title = 'App name';
            }
            preview.close();
          }
          setTimeout(updatePreview, 300);
       
          function handleFileSelect(evt) {
            evt.stopPropagation();
            evt.preventDefault();

            var files = evt.dataTransfer.files; // FileList object.
            var reader = new FileReader(); 
            reader.onload = function(event) {
              editor.setValue( event.target.result );
            }       
            reader.readAsText(files[0],"UTF-8");
          }
        </script>
      </body>
    </html>
Add the following plugin to your head tags...
Code: Select all
<script src='https://togetherjs.com/togetherjs-min.js'></script>
Add a button, and call TogetherJS...
Code: Select all
<button id="collab" onclick="TogetherJS(this); return false;">Team Up</button>
I personally hate calling my Javascript in my HTML. I like keeping my code nice and neat. Here's how I called TogetherJS...
Code: Select all
var App = {};
App.run = function() {
    (function init() {
        var shareBtn = document.getElementById("collab");

        // share button should trigger TogetherJS
        shareBtn.addEventListener("click", function(e) {
            e.preventDefault();
            TogetherJS(this);
        }, false);
    })();
}

window.addEventListener("load", function() {
    App.run();
}, false);

TogetherJSConfig_siteName="Basic Codemirror Demo";
TogetherJSConfig_toolName="Team Up";
TogetherJSConfig_dontShowClicks = true;
TogetherJSConfig_suppressJoinConfirmation = true;
TogetherJSConfig_disableWebRTC = true;
TogetherJSConfig_includeHashInUrl = true;
TogetherJSConfig_youtube = false;
TogetherJSConfig_on = {
    ready: function () {
        var share = document.getElementById("collab");
        share.style.display = "none";
    },
    close: function() {
        var share = document.getElementById("collab");
        share.style.display = "inline-block";
    }
};
If you need any help on how to use TogetherJS please revert to the Documentation, and read up more about it on Github.

There's many projects out there that are already using TogetherJS...
Wordpress Plugins
Liveweave (Code Playground)
.NET Fiddle (Code Playground)
Mozilla Popcorn (Video Editor)
DrawTogether (HTML5 Drawing Board)
HTML5 Blackboard

Mozilla's TogetherJS is nice and all, but it doesn't solve the problem for touch users.

After a bit of research I came across many methods of collaborative works. This one worked well for me.
CollabDraw

When it comes to collaboration the sky's the limit. Enjoy!
1 post Page 1 of 1
Return to “Tutorials”