Enable real-time collaboration feature

How to enable real-time collaboration feature on your website?

Users can now enjoy real-time editing directly within WordPress, just like in Google Docs. They can share real-time feedback, suggestions, and discussions - all within the familiar WordPress environment.

You can invite others to edit this post in real time. When enabled, people you invite as coeditors can edit this post in real time and publish it.

• How do we enable real-time editing features?
• How to set up real-time editing on your WordPress website?
• Current limitations in real-time editing
• Custom permissions levels of Viewer, Commenter, and Co-editor.

How do we enable Real-time Collaboration features?

• Step 1: Recommended Server Configurations and Compatibility.
• Step 2: Multicollab version 4.0 is activated on your website.
• Step 3: Go to Multicollab Dashboard Setting and navigate to the real-time editing setting. WebSocket Service is required to use a real-time editing feature.

Please select one of the following options:

• Use Multicollab’s Complimentary Websocket services.
• Your WebSocket URL — If you want to use your own WebSocket service, then follow the setup guidelines and update your WebSocket URL here.

• Step 4: After the WebSocket configuration is done. You must enable the “Real-time Editing (Beta).”

• Step 5: You can invite others using the "Share" button beside the default Gutenberg editor publish button on the top bar.

You can see the active and non-active collaborator user list on Multicollab sidebar.

If users collaborate actively on the page, we assign an active random color to their profile. If the user is offline, we will assign a grey color to their profile.

Learn more about the permission levels of viewers, commenters and co-editors.

How to set up real-time editing on your WordPress website?

Real-time editing is dependent on utilizing WebSocket Technology. You need to enable WebSocket configuration in your host. To implement real-time co-editing functionality, we have used the following tech stack. WebSocket, Yjs Framework (https://github.com/yjs) and React.

What is a WebSocket?

WebSocket is a communication protocol that provides full-duplex communication channels over a single TCP connection. It allows for real-time, bidirectional communication between a web browser or client application and a web server.

Unlike traditional HTTP, a request-response protocol, WebSocket enables ongoing, persistent connections between the client and the server. We can implement WebSocket in Nginx and Apache.

The real-time editing feature is available to all Multicollab plans - Free and Pro.

There are two options to set up WebSocket.

Option 1: Multicollab’s Complimentary Websocket services

You can use our Multicollab WebSocket URL for real-time editing. We are offering Multicollab WebSocket free for the first year as an introductory offer.

Here is the step-by-step guide for the configuration of Multicollab WebSocket.

• Step 1: Multicollab version 4.7 is activated on your website.

• Step 2: Go to Multicollab Dashboard Setting and navigate to the real-time editing setting. WebSocket Service is required to use a real-time editing feature. Please select the below option:

  Use Multicollab’s Complimentary Websocket services. (You can use our free WebSocket service to enable real-time editing.)

• Step 3: After the WebSocket configuration is done. You must enable the “Real-time Editing (Beta).” options below.

• Step 4: You can invite others using the "Share" button beside the default Gutenberg editor publish button on the top bar.

You can see the active and nonactive collaborator user list on the Multicollab sidebar.

If users collaborate actively on the page, we assign an active random color to their profile. If the user is offline, we will assign a grey color to their profile.

Learn more about the permission levels of viewers, commenters, and co-editors.

Option 2: Set up your own WebSocket

If you want to use your own Websocket, Here is the step-by-step guide for configuring WebSocket.

Step 1: Recommended Server Configurations and Compatibility

Basic Requirements:

• WordPress Version: WordPress 6 and 6+
• PHP Version: PHP 8
• Gutenberg Version: 12 and 12+
• Browser Requirements: All modern browsers that support WebSocket (Check Websocket Support for your Browser)

Server Configurations:

• Server Operating System: Ubuntu 20.04 LTS
• Web Server: NGINX/1.18.0
• PHP Version: PHP 8.0
• WordPress: 6.2
• WebSocket
• SSL

Step 2: Multicollab version 4.7 is activated on your website.

Step 3: Go to Multicollab Dashboard Setting and navigate to the real-time editing setting. WebSocket Service is required to use a real-time editing feature. Please select the below options:

• Your WebSocket URL — If you want to use your own WebSocket service, then follow the setup guidelines and update your WebSocket URL here.

Websocket Configuration in Different Web Servers

• Set up Websocket on NGINX
• Set up Websocket on Apache
• Set up Websocket on Microsoft IIS
• Enable Websocket with Node and y-WebSocket
• Set up Websocket on WordPress VIP Hosting

Step 4: After the WebSocket configuration is done. You must enable the “Real-time Editing (Beta).” options below.

Step 5: You can invite others using the "Share" button beside the default Gutenberg editor publish button on the top bar.

You can see the active and inactive collaborator user list on Multicollab sidebar.

If users collaborate actively on the page, we assign an active random color to their profile. If the user is offline, we will assign a grey color to their profile.

Websocket Configuration in Different Web Servers:

Set up WebSocket on NGINX:

If you are using NGINX, then follow the below step:

• Open the Nginx configuration file ( Path should be: /etc/nginx/sites-available/your_domain) and add the following code with a /ws location to use port 8080 for WebSocket.

    location /ws {
        # redirect all traffic to localhost:8080;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_pass http://127.0.0.1:8080$request_uri;
        proxy_redirect off;
        proxy_read_timeout 86400;

        # enables WS support
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        # prevents 502 bad gateway error
        proxy_buffers 8 32k;
        proxy_buffer_size 64k;

        reset_timedout_connection on;

        error_log /var/log/nginx/wss_error.log;
        access_log /var/log/nginx/wss_access.log;
    }

// Some code

Set up Websocket on Apache

How to use real-time co-editing in Apache Hosting?

• Modify the Apache configuration and use port 8080 for WebSocket.
• Open the Apache configuration file (Path Should be: /etc/apache2/sites-available/sitename.conf) and add the following code to use port 8080 for WebSocket.

<VirtualHost *:443>
  
  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
</VirtualHost>

Set up WebSocket on Microsoft IIS

How to use real-time co-editing in Microsoft IIS Hosting?

• Ensure the WebSocket protocol is installed as a server role in the Windows Server Manager.
• Go to the IIS Manager and select the website or application where you want to enable WebSocket. Open the "WebSocket" feature and make sure it is enabled.
• Optionally, you can configure WebSocket-specific settings such as request timeout or buffer size. Save the changes and restart IIS to apply the WebSocket configuration.

Enable WebSocket with Node and y-websocket

Install dependencies

npm i y-websocket

Start a y-websocket server

HOST=localhost PORT=8080 npx y-websocket

After the above configuration, the websocket path should be:

• With SSL: wss://yourdomain.com/ws
• Without SSL: wss://yourdomain.com/ws

Set up Websocket on WordPress VIP Hosting

How to use real-time co-editing in WordPress VIP Hosting?

Step 1: To implement WebSocket in the WordPress VIP server, check out the example configuration here: https://github.com/Automattic/vip-go-node-skeleton/tree/trunk/examples/websocket

Step 2: Since we are using y-websocket, you will be required to clone the following folder and add it to the bin folder at the root of the repository: https://github.com/yjs/y-websocket/tree/master/bin

Step 3: Modify the package.json file to use y-websocket configuration.

{
  "name": "websocket",
  "version": "1.0.0",
  "description": "Example websocket configuration for multicollab",
  "main": "bin/server.js",
  "scripts": {
    "build": "echo \"no build step\"",
    "start": "node ./bin/server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "WordPress VIP",
  "license": "ISC",
  "dependencies": {
    "ws": "^8.5.0",
    "yjs": "^13.5.6",
    "lib0": "^0.2.52",
    "lodash.debounce": "^4.0.8",
    "y-protocols": "^1.0.5"
  },
  "devDependencies": {
    "y-websocket": "^1.0.6",
    "@types/node": "^18.15.0",
    "rollup": "^3.19.1",
    "standard": "^12.0.1",
    "typescript": "^4.9.5"
  }
}

The WebSocket path should be: wss://yourdomain.com/_ws/

Current Limitations in Real-time Collaboration

• Suggestion mode cannot be used while real-time editing is enabled.
• The real-time editing feature currently has a maximum limit of five users per page.
• The WebSocket connection may become disrupted after the post remains idle for 5-10 minutes. To re-establish the connection, users are required to refresh the page.
• When three or more users are typing simultaneously, it may cause difficulties for another user when attempting to select text.
• Undo/Redo is partially compatible with real-time coediting.
• A post containing 4-5 identical text blocks in a 4000-character post causes slight performance issues.
• A post containing 4-5 identical text blocks in a 4000-character post might make things a bit slower.
• There might be a small delay when a post containing 10-11 unique text blocks is collaborated upon. If there are more blocks that are non-text, it might slow things down even more.
• When a post contains 15-20 text and non-text blocks in a sub-2000-character post, things may get significantly slower.

Frequently Asked Questions (FAQs)

Can I use WebSocket in shared hosting?

No, shared hosting lacks the necessary resources and configurations to support WebSocket servers

What is a WebSocket, and why do I need it for real-time editing on my website?

WebSocket is a communication protocol that provides full-duplex communication channels over a single TCP connection. It allows for real-time, bidirectional communication between a web browser or client application and a web server. Unlike traditional HTTP, a request-response protocol, WebSocket enables ongoing, persistent connections between the client and the server. For real-time editing, we required data transfer to be faster. That is why a WebSocket is needed.

Do I need a particular hosting plan for WebSocket support?

If you use VPS, you can implement the WebSocket, and there is no need to purchase any plan for the WebSocket. If you use shared hosting, then it depends on the service provider.

Are there any security considerations when using WebSockets for editing?

For now, we have not noticed any security-related issues. We always try to make it secure.

Will WebSockets affect my website's performance with multiple users editing simultaneously?

We are using Websocket for the WordPress editor side only, so there is no performance issue happening to the website.

Is there ongoing maintenance required for WebSocket functionality?

No ongoing maintenance is required for WebSocket functionality. Once set up and integrated into your website, it should continue to work seamlessly without needing regular care.

Can the suggestion Mode/feature work in real-time?

If you enable real-time collaboration, the suggestion feature will be disabled. You will need to turn off real-time collaboration to use the suggestion feature. These two features cannot be used simultaneously.