Manage a website with node-red, google sheets and websocket

With the google sheets node (node-red-contrib-google-sheets) it is easy to setup a "cms like website" where you store your text for each page in a google sheet. With a short javascript on each page that communicates over websocket with the node-red server we have a convenient way of updating information on our website.

How to setup google sheets can be found here: https://flows.nodered.org/flow/a36ccbcfc43c264cda892383fe034fe3

In this example I use a div tag that is updated from google sheets. The javascript on the website can handle both text and html. Set the id of the div tag to received-text.

<script>
        const ws = new WebSocket('wss://myserver.onrender.com/nodes/ws/mywebsite'); // Replace with your server URL

        // When the WebSocket connection is open
        ws.addEventListener('open', () => {
            console.log('WebSocket connection established.');
            ws.send('Hello from the web page!'); // Send your message here
        });

        ws.addEventListener('message', (event) => {
            const receivedText = event.data; // Assuming the server sends plain text or HTML
            const paragraphElement = document.getElementById('received-text');
            paragraphElement.innerHTML = receivedText; // Use innerHTML to handle HTML content
        });
    </script>

If we want to avoid to much traffic and load on the node-red server we can save the text or html to github instead of sending it to the website over websocket and using a headless approach. This could be setup with a website hosted at netlify, cloudflare or other similar services.

You can find this information as a blog article on Apivis where I am loading the content from a google sheet and presenting it at https://www.apivis.com/mywebpage

The apivis website is hosted using Cloudflare and github but the javascript code should work on any website.

Copy[{"id":"7812f0c77c3b8d66","type":"tab","label":"my web page","disabled":false,"info":"","env":[]},{"id":"b142eb56d4ff7532","type":"websocket in","z":"7812f0c77c3b8d66","name":"websocket in","server":"2209ac3497499772","client":"","x":250,"y":180,"wires":[["f5a679a25edf4b3e"]]},{"id":"f64219ce19003389","type":"websocket out","z":"7812f0c77c3b8d66","name":"websocket out","server":"2209ac3497499772","client":"","x":750,"y":180,"wires":[]},{"id":"f5a679a25edf4b3e","type":"GSheet","z":"7812f0c77c3b8d66","creds":"2027e7ce351cf6b7","method":"get","action":"","sheet":"1dkdkcKKIXYrRIPpmTtKeLX66rQeLFogLQzj70Xc_8","cells":"Sheet1!A2","flatten":true,"name":"text for my page","x":430,"y":180,"wires":[["0aac57bed8d6aab2"]]},{"id":"0aac57bed8d6aab2","type":"split","z":"7812f0c77c3b8d66","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":580,"y":180,"wires":[["12f0815e3fddeee6","f64219ce19003389"]]},{"id":"12f0815e3fddeee6","type":"debug","z":"7812f0c77c3b8d66","name":"debug 571","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":740,"y":220,"wires":[]},{"id":"2209ac3497499772","type":"websocket-listener","path":"/ws/mysite","wholemsg":"false"},{"id":"2027e7ce351cf6b7","type":"gauth","name":""}]