History: PluginTogether

Source of version: 50 (current)

See also ((Realtime))

! Plugin Together
TogetherJS was a free, open-source JavaScript library that added collaboration features and tools to users’ websites: https://foundation.mozilla.org/en/artifacts/togetherjs/

While Mozilla is no longer leading the project, the source code is available at [https://github.com/jsfiddle/togetherjs].

This ((wiki plugin)) connects to TogetherJS, that makes it surprisingly easy to collaborate in real-time: notify unique urls, co-write, talk, follow pages visited by your buddies. It was formerly known as TowTruck. It was added in ((Tiki12)) and improved in ((Tiki15)), ((Tiki19)) and ((Tiki21)).
Since ((Tiki22)) you can specify a different server through a new parameter added to the plugin, in case the server side code needed for this plugin to work is no longer working with the default server provided by Mozilla.

You can easily use this plugin in your Tiki installation by means of applying the [https://profiles.tiki.org/Together|Together profile].

__Note__: TogetherJS is alpha-quality software. We do not recommend using it in production at this time, even if it is an interesting demonstration of the capabilities of a Real Time Collaboration (RTC) tool.

{kaltura id="0_k15wunh9"}
!! Parameters
{pluginmanager plugin="together"}
!! Current Limitations
* Before ((Tiki15)): You need to deactivate "__Warn on edit conflict__"  in __Settings -> Wiki -> General preference__  Otherwise, you will get this annoying message: "Override lock and carry on with edit"
* If you are permitting anonymous edits, you'll want to turn off "Anonymous editors must enter anti-bot code (CAPTCHA) " Settings -> Security -> Spam protection
!! Where does it work?
In theory, TogetherJS can work with any feature in Tiki. However, some features in Tiki may need adjusting. The following table is to keep track of the state of each feature.
|| __Version__ | __Feature__ | __Works or not__
12.2 | Wiki pages with wiki syntax | yes
12.2 | Spreadsheet | no
12.2 | Tracker Items | yes (textareas)
12.2 | Drawing with SVG-edit | No
12.2 | Slideshow in view mode | No
12.2 | Slideshow in edit mode | Yes
||
!! Examples
''This code added to a custom module, or a module menupage in a side column:''
{CODE(colors="tiki")}
{together}
{CODE}

''Would produce a TogetherJS button. Once clicked by a user, it will add a TogetherJS widget in the right margin of the window, as in the following image:''

{img src="display842" link="display842" width="600" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

In this example, 
# user Mary has clicked at the button "__CoWrite with Together__" (formerly known as "TowTruck", like in the screenshots)
# the TogetherJS widget is shown up in the right margin of the window
# Once you click at the icon to invite friends, you will get a unique url that you can send over email, sms or any means to your buddies, so that they can start cowriting with you in that Tiki page (tracker item in this example)
# You can also change your default username in TogetherJS, set your own avatar, color, etc. In this example Mary sets the avatar to a puppy, and keeps the default brownish-redish font color.
* Additionally you can talk (experimental) or chat with your buddies.

Once you sent the link to your buddy (let's say, user John), and he clicks on it, he will see a window like the following requesting him to accept the collaborative session:

{img src="display843" link="display843" width="300" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

Once accepted, he can log in that Tiki site (if needed), and he will see something similar to Mary. 

{img src="display844" link="display844" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

Clicking at the avatar of your user you will be able to see the options to rename your user, set avatar, font color, etc.

{img src="display845" link="display845" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

In this example, John renamed his TogetherJS username accordingly, choose a tennis ball avatar and did set his font color to orange. After that, he continued editing the contents of the tracker item, that became updated in real time in Mary's browser also.

{img src="display846" link="display846" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

!! Param serverurl
At some point during 2019 PluginTogether stopped working because some server side software was missing from the default server from mozilla labs. During July 2021 a new param was added to this plugin in ((Tiki21)) in order to allow using other server urls (param -+serverurl+- ), such as 
^ __https://togetherjs-hub.glitch.me/__ ^

Alternatively, you can set up your own server for togetherjs server-side code. 

!! Setup up your own server
See:
https://togetherjs.com/docs/#hosting-the-hub-server

On ((Ubuntu Install|Ubuntu 16.04 servers)), you need to:
# install npm (npm v 3.5.2; node version 4.2.6 are the default versions, and they seem to be ok for PluginTogether to work)
+  {CODE(colors="shell")}
sudo apt-get install npm
{CODE}

You also need to:
# clone togetherjs code
+ {CODE(colors="shell")}
sudo mkdir -p /var/www/togetherjs/ # assuming /var/www is not the public apache webroot but /var/www/html/
cd /var/www/togetherjs/
sudo git clone https://github.com/jsfiddle/togetherjs.git
{CODE}
# install node dependencies
+ {CODE(colors="shell")}
cd /var/www/togetherjs/
sudo npm install
{CODE}
# make a symbolic link from /usr/bin/nodejs to /usr/bin/node
+{CODE(colors="shell")}
sudo ln -s /usr/bin/nodejs /usr/bin/node
{CODE}
# run server binding it to a domain, eventually with https (ideally), using apache proxy to server the node server in port 8080 to users visiting that domain with http or https.
** enable mod proxy proxy_http proxy_wstunnel
++ {CODE(colors="shell")}
sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod proxy_wstunnel
{CODE}
# make the apache virtual configuration file
+{CODE(colors="shell")}
cd /etc/apache2/sites-available/
sudo cp example0.org.conf example1.org.conf
sudo nano example1.org.conf
sudo a2ensite example1.org
sudo service apache2 restart
{CODE}
** Example contents of this -+/etc/apache2/sites-available/exaple1.org.conf+- :
++ {CODE(ln="1" colors="html")}
<VirtualHost *:80>
	# The ServerName directive sets the request scheme, hostname and port that
	# the server uses to identify itself. This is used when creating
	# redirection URLs. In the context of virtual hosts, the ServerName
	# specifies what hostname must appear in the request's Host: header to
	# match this virtual host. For the default virtual host (this file) this
	# value is not decisive as it is used as a last resort host regardless.
	# However, you must set it for any further virtual host explicitly.
	#ServerName www.example.com
	ServerName example1.org

	ServerAdmin webmaster@localhost
	DocumentRoot /var/www/html

	RewriteEngine on
	RewriteCond ${HTTP:Upgrade} websocket [NC]
	RewriteCond ${HTTP:Connection} upgrade [NC]
	RewriteRule .* "wss:/localhost:8080/$1" [P,L]
  
	ProxyPass / https://localhost:8080/
	ProxyPassReverse / https://localhost:8080/
	ProxyRequests off

<Directory /var/www/html/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
 </Directory>

	# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
	# error, crit, alert, emerg.
	# It is also possible to configure the loglevel for particular
	# modules, e.g.
	#LogLevel info ssl:warn

	ErrorLog ${APACHE_LOG_DIR}/error.log
	CustomLog ${APACHE_LOG_DIR}/access.log combined

	# For most configuration files from conf-available/, which are
	# enabled or disabled at a global level, it is possible to
	# include a line for only one particular virtual host. For example the
	# following line enables the CGI configuration for this host only
	# after it has been globally disabled with "a2disconf".
	#Include conf-available/serve-cgi-bin.conf
</VirtualHost>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
{CODE}

Run the server with 
{CODE(ln="1")}
cd /var/www/togetherjs/; node hub/server.js &
# or sudo node hub/server.js --host=server_ip
# replace server_ip with the ip of this server where you installed this software (example1.org in this example)
{CODE}

Check the process with:
* -+ps aux | grep node+-
* -+ps aux | grep hub+-
** http://example1.org/status > should say "OK"


!! Related links
* https://togetherjs.com/
* https://blog.mozilla.org/labs/2013/09/reintroducing-togetherjs-formerly-known-as-towtruck/
* https://hacks.mozilla.org/2013/10/introducing-togetherjs/
* http://www.ianbicking.org/blog/2014/03/towards-next-level-of-collaboration.html
* http://www.ianbicking.org/blog/2013/11/nouning-the-verb-of-browsing-and-activity.html
* https://www.ianbicking.org/blog/2014/09/professional-transitions.html

!!Aliases
(alias(PluginTowTruck)) | (alias(Together)) | (alias(Mozilla Together)) | (alias(Mozilla TowTruck)) | (alias(TogetherJS))