josephg / josephg/ShareJS

A tutorial for version 0.7

Open
#340 18 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
5k
Forks
454
PR merge metrics
No merged PRs in 30d

Description

I just cloned the master branch and tried the tutorial at https://github.com/share/ShareJS/wiki/Tutorial%3A-The-Basics which is for 0.6. Obviously it did not work.

It should be updated to reflect changes introduced into connect 3.x, which is what npm just installed for me (3.2.0) and into ShareJs itself.

`createServer` has been moved from `connect` to the `http` module.
`static` has been replaced by the `server-static` module.
`ShareJs` doesn't have the `attach` method anymore.

After a couple of hours of studying the source code and the various examples (and my motivation almost completely faded away) I got this code that almost works (sorry for the JavaScript, I'm not using CoffeScript).

``` javascript
"use strict";

// import the Connect middleware (http://www.senchalabs.org/connect/)
var Duplex = require("stream").Duplex;
var connect = require("connect");
var http = require("http");
var serveStatic = require("serve-static");
var browserChannel = require("browserchannel").server;
var livedb = require("livedb");

// create a ShareJS server with no persistence
var backend = livedb.client(livedb.memory());
var share = require("share").server.createClient({ backend: backend });

var app = connect();
// attach a static file server that serves files from our static directory
app.use(serveStatic(__dirname + "/../static"));
app.use(browserChannel({ cors: "*" }, function (client) {
var stream = new Duplex({ objectMode: true });

stream._read = function () {};
stream._write = function (chunk, encoding, callback) {
if (client.state !== "closed") {
client.send(chunk);
}
callback();
};

client.on("message", function (data) {
stream.push(data);
});

client.on("close", function (reason) {
stream.push(null);
stream.emit("close");
});

stream.on("end", function() {
client.close();
});

// Give the stream to sharejs
return share.listen(stream);
}));

// create a Connect server
var server = http.createServer(app);

// set our server port and start the server
var port = 5000;
server.listen(port, function () { console.log("Listening on " + port); });
```

``` html


ShareJS Tutorial


ShareJS Tutorial


Connecting...






$(document).ready(function () {
var socket = new BCSocket(null, { reconnect: true });
var sharejsSocket = new window.sharejs.Connection(socket);

var doc = sharejsSocket.get("docs", "hello");
doc.subscribe();
doc.whenReady(function () {
console.log("doc ready, data: ", doc.getSnapshot());
if (!doc.type) {
doc.create("text");
}
doc.attachTextarea(document.getElementById("editor"));
});
});

```

The server starts but unfortunately the browser fails because it goes through the else branch of Doc.createContext

``` javascript
if (type.api) {
// Copy everything else from the type's API into the editing context.
for (var k in type.api) {
context[k] = type.api[k];
}
} else {
context.provides = {};
}
```

because the `type` object doesn't have a `api` attribute and `attachTextarea` throws the `Cannot attach to non-text document` error.

Maybe I'll go back to 0.6 and check if that works but you have a mix of 0.7 and 0.6 documentation. The most useful piece of information is the 0.6 Tutorial and the `npm install share` in the README installs 0.7. This is confusing and you should start your README with clear instructions of how to get this working (the browserchannel example looks as if it won't compile).

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.