Real-time Editing (Beta)

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

This major update revolutionizes the way WordPress content teams collaborate in WordPress.

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?

Here is a step-by-step guide:

  • 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 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.

Multicollab’s Complimentary Websocket services WebSocket Service is required to use a real-time editing feature. You can use our free WebSocket service to enable real-time editing.

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

IMPORTANT NOTE:

  • 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.
  • With real-time editing. Changes will reflect other users, but edits will save as per the default WordPress workflow. The user must click " save draft, " and then all edits will be saved in the database.

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.0 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.

Important Note:

  • 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.
  • With real-time editing. Changes will reflect other users, but edits will save as per the default WordPress workflow. The user must click " save draft, " and then all edits will be saved in the database.

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.


Basic Requirements:

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.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 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


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

Important Note:

  • 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.
  • With real-time editing. Changes will reflect other users, but edits will save as per the default WordPress workflow. The user must click " save draft, " and then all edits will be saved in the database.

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 Editing


  • Suggestion mode cannot be used while real-time editing is enabled.
  • Two users cannot collaborate on the same block simultaneously.
  • 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)

Q. Can I use WebSocket in shared hosting?

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


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

A. 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.


Q. How do I add a WebSocket to my Website Hosting server for collaborative real-time editing?

A. We have created step-by-step details and a technical guide to set up a WebSocket in your hosting server. Click here


Q. Do I need a particular hosting plan for WebSocket support?

A. 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.


Q. Are there any security considerations when using WebSockets for editing?

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


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

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


Q. Is there ongoing maintenance required for WebSocket functionality?

A. 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.


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

A. 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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us