socket.io: Factor out client connection logic

src/node/utils/tar.json

@@ -22,6 +22,7 @@
   , "excanvas.js"
   , "farbtastic.js"
   , "skin_variants.js"
+  , "socketio.js"
   ]
 , "timeslider.js": [
     "timeslider.js"
@@ -45,6 +46,7 @@
   , "broadcast.js"
   , "broadcast_slider.js"
   , "broadcast_revisions.js"
+  , "socketio.js"
   ]
 , "ace2_inner.js": [
     "ace2_inner.js"

src/static/js/admin/plugins.js

@@ -1,16 +1,9 @@
 'use strict';
 
-$(document).ready(() => {
-  const loc = document.location;
-  const port = loc.port === '' ? (loc.protocol === 'https:' ? 443 : 80) : loc.port;
-  const url = `${loc.protocol}//${loc.hostname}:${port}/`;
-  const pathComponents = location.pathname.split('/');
-  // Strip admin/plugins
-  const baseURL = `${pathComponents.slice(0, pathComponents.length - 2).join('/')}/`;
+/* global socketio */
 
-  // connect
-  const room = `${url}pluginfw/installer`;
-  const socket = io.connect(room, {path: `${baseURL}socket.io`});
+$(document).ready(() => {
+  const socket = socketio.connect('..', '/pluginfw/installer');
 
   const search = (searchTerm, limit) => {
     if (search.searchTerm !== searchTerm) {

src/static/js/admin/settings.js

@@ -1,16 +1,9 @@
 'use strict';
 
-$(document).ready(() => {
-  const loc = document.location;
-  const port = loc.port === '' ? (loc.protocol === 'https:' ? 443 : 80) : loc.port;
-  const url = `${loc.protocol}//${loc.hostname}:${port}/`;
-  const pathComponents = location.pathname.split('/');
-  // Strip admin/plugins
-  const baseURL = `${pathComponents.slice(0, pathComponents.length - 2).join('/')}/`;
+/* global socketio */
 
-  // connect
-  const room = `${url}settings`;
-  const socket = io.connect(room, {path: `${baseURL}socket.io`});
+$(document).ready(() => {
+  const socket = socketio.connect('..', '/settings');
 
   socket.on('settings', (settings) => {
     /* Check whether the settings.json is authorized to be viewed */

src/static/js/pad.js

@@ -29,6 +29,7 @@ let socket;
 require('./jquery');
 require('./farbtastic');
 require('./excanvas');
+require('./gritter');
 
 const Cookies = require('./pad_utils').Cookies;
 const chat = require('./chat').chat;
@@ -44,7 +45,7 @@ const paduserlist = require('./pad_userlist').paduserlist;
 const padutils = require('./pad_utils').padutils;
 const colorutils = require('./colorutils').colorutils;
 const randomString = require('./pad_utils').randomString;
-require('./gritter'); // Mutates the jQuery object to make $.gritter available.
+const socketio = require('./socketio');
 
 const hooks = require('./pluginfw/hooks');
 
@@ -218,15 +219,7 @@ const sendClientReady = (isReconnect, messageType) => {
 };
 
 const handshake = () => {
-  const loc = document.location;
-  // get the correct port
-  const port = loc.port === '' ? (loc.protocol === 'https:' ? 443 : 80) : loc.port;
-  // create the url
-  const url = `${loc.protocol}//${loc.hostname}:${port}/`;
-  // connect
-  socket = pad.socket = io.connect(url, {
-    // Allow deployers to host Etherpad on a non-root path
-    path: `${exports.baseURL}socket.io`,
+  socket = pad.socket = socketio.connect(exports.baseURL, '/', {
     reconnectionAttempts: 5,
     reconnection: true,
     reconnectionDelay: 1000,

src/static/js/socketio.js

@@ -0,0 +1,29 @@
+'use strict';
+
+/**
+ * Creates a socket.io connection.
+ * @param etherpadBaseUrl - Etherpad URL. If relative, it is assumed to be relative to
+ *     window.location.
+ * @param namespace - socket.io namespace.
+ * @param options - socket.io client options. See
+ *     https://socket.io/docs/v2/client-api/#new-Manager-url-options
+ * @return socket.io Socket object
+ */
+const connect = (etherpadBaseUrl, namespace = '/', options = {}) => {
+  // The API for socket.io's io() function is awkward. The documentation says that the first
+  // argument is a URL, but it is not the URL of the socket.io endpoint. The URL's path part is used
+  // as the name of the socket.io namespace to join, and the rest of the URL (including query
+  // parameters, if present) is combined with the `path` option (which defaults to '/socket.io', but
+  // is overridden here to allow users to host Etherpad at something like '/etherpad') to get the
+  // URL of the socket.io endpoint.
+  const baseUrl = new URL(etherpadBaseUrl, window.location);
+  const socketioUrl = new URL('socket.io', baseUrl);
+  const namespaceUrl = new URL(namespace, new URL('/', baseUrl));
+  return io(namespaceUrl.href, Object.assign({path: socketioUrl.pathname}, options));
+};
+
+if (typeof exports === 'object') {
+  exports.connect = connect;
+} else {
+  window.socketio = {connect};
+}

src/static/js/timeslider.js

@@ -29,6 +29,7 @@ require('./jquery');
 const Cookies = require('./pad_utils').Cookies;
 const randomString = require('./pad_utils').randomString;
 const hooks = require('./pluginfw/hooks');
+const socketio = require('./socketio');
 
 let token, padId, exportLinks, socket, changesetLoader, BroadcastSlider;
 
@@ -51,14 +52,7 @@ const init = () => {
       Cookies.set('token', token, {expires: 60});
     }
 
-    const loc = document.location;
-    // get the correct port
-    const port = loc.port === '' ? (loc.protocol === 'https:' ? 443 : 80) : loc.port;
-    // create the url
-    const url = `${loc.protocol}//${loc.hostname}:${port}/`;
-
-    // build up the socket io connection
-    socket = io.connect(url, {path: `${exports.baseURL}socket.io`});
+    socket = socketio.connect(exports.baseURL);
 
     // send the ready message once we're connected
     socket.on('connect', () => {

src/templates/admin/plugins.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="../static/css/admin.css">
     <script src="../static/js/jquery.js"></script>
     <script src="../socket.io/socket.io.js"></script>
+    <script src="../static/js/socketio.js"></script>
     <script src="../static/js/admin/plugins.js"></script>
     <link rel="localizations" type="application/l10n+json" href="../locales.json" />
     <script src="../static/js/html10n.js"></script>

src/templates/admin/settings.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="../static/css/admin.css">
     <script src="../static/js/jquery.js"></script>
     <script src="../socket.io/socket.io.js"></script>
+    <script src="../static/js/socketio.js"></script>
     <script src="../static/js/admin/minify.json.js"></script>
     <script src="../static/js/admin/settings.js"></script>
     <script src="../static/js/admin/jquery.autosize.js"></script>