# WordPress With WebSockets (Real-Time Updates)

**Channel:** LearnWebCode
**Source:** https://www.youtube.com/watch?v=GPnvhJIb7co
**Transcript page:** https://www.withtranscript.ai/video/GPnvhJIb7co

## Chapters

- 0:00 — Live WordPress Updates Demo and Sponsor
- 2:46 — Setting Up Node Server and Security
- 9:44 — Fixing Token Access and Price Sync
- 13:29 — Adding Toast Alerts for New Pets
- 16:46 — Deploying to Cloudways and Final Test

## Transcript

**[0:00] Speaker A:** How's it going everybody? Hope you've been well. This is my WordPress admin dashboard. This is the public front end of my website. I want to draw your attention to this. So, it costs $99 to adopt Buddy the Dog, but if I come into my WordPress dashboard and change that price to let's say 129, as soon as I click update, I want you to keep watching this. So, I click update. Amazing, right? Or better yet, here I am adding a brand new pet that can be adopted. There's the featured image. This dog is named Barks A Lot, and watch this. As soon as I click publish here, watch in the background. So, I'll click publish. New pet added, Barks A Lot. I can click on it. There you go. So, we just saw the finished product of live real-time updates, but in this video I'm going to rewind and sort of start with a blank canvas and build it again with you step by step.

**[0:48] Speaker A:** I'll develop it locally and then even deploy it live up onto the web so that you could use this in your real projects, however you see fit if you wanted to. In terms of deploying it live up onto the web, that brings us to the sponsor of today's video, Cloudways. Specifically, Cloudways Velocity, which is their managed Node.js hosting. Now, you might be wondering, "Hey, I thought this was WordPress." It is. This is a 100% standard WordPress back end. This is a standard 100% WordPress front end, but I've layered on top a bit of progressive enhancement. So, any aspect of the site that needs true live real-time updates, instead of pulling the WordPress back end every 3 to 5 seconds to see if there's updates, which would crash your website if even 30 people were viewing your site, instead I've set up an external Node.js server using socket.io, and now my WordPress website, I mean, you could have thousands of people viewing this page, and they'd be ready for real-time updates, and the Node.js server would

**[1:45] Speaker A:** barely be breaking a sweat. Now, in the past, hosting a Node.js application was complicated, intimidating, but Velocity from Cloudways makes it as easy as possible. You don't have to wrap your mind around serverless, it's not serverless, it's persistent, A traditional server, you don't have to worry about using a third-party service for storage and for database. It can all be managed from one location. If you're looking for a simple, reliable, and powerful way to host your Node.js applications, I recommend you check out Cloudways Velocity. You can get your first 2 months 80% off by using promo code BFCM802. This is their Black Friday and Cyber Monday discount, and it's good for all of their products, not just Velocity. It also comes with unlimited free migrations handled by the experts on the Cloudways team. So, if you have projects you want to migrate over, they can help you with that.

**[2:36] Speaker A:** If you want to use this discount, just know that it ends December 4th, so be sure to use it before then. There's a link with that promo code already applied in the description and in the pinned comment. Now, let's get into the action.

**[2:46] Speaker A:** Okay, off camera, I just set my project back in time to before I had implemented any sort of real-time live update. So, this is just a vanilla classic WordPress theme. It's just HTML and CSS, zero JavaScript. The only thing I've done is in the WordPress dashboard, I've set up a custom post type called pets, and that post type has custom fields like biography, price, and favorite food. That's it. The idea is anyone can follow along from this point forward. This is just a bare-bones classic theme with nothing fancy going on. So, from this point forward, how would I go about spinning up a Node.js server for live updates or for WebSocket technology? I'm actually just going to create a new folder in my theme folder, uh so, new folder. The name could be anything. It could be pizza, it could be unicorn, but I'll name it like Node Socket.IO server.

**[3:43] Speaker A:** Now, right away, I want to say this folder has nothing to do with a WordPress theme. This folder is going to be a node server that runs completely separately, completely independently. However, I want an AI agent to be able to seamlessly write code from both directions. I want the agent to be able to write code in my WordPress files and on the Node.js server side and, you know, facilitate that dance between the two technologies. So, I found that having them in the same overall project folder makes that so easy and so simple that it's trivial to implement this on any project and any feature you could think for. However, we absolutely we don't want to ship the Node.js files with our WordPress theme. So, what I would do is in the root of my folder, I'll create a .gitignore file. So, .git ignore. You're going to ignore the standard files that you would normally ignore, right?

**[4:37] Speaker A:** Like node modules or like Mac or Windows system files, you know, if you had a .env file, but more importantly, ignore that new project folder. So, I would ignore the entire node uh socket.io server folder. And now when I'm working with my WordPress files, it's almost as if the node server doesn't exist. However, my AI agent, it can still obviously see the real files on my hard drive. Now, before we go any further and actually start building out the node socket server, I want to draw your attention to this file I have in the root of my WordPress theme folder. I named it all uppercase agents.md. Don't worry, I'm not a markdown engineer. All I did was I literally just said, "Please use this local dev URL so that you can write features and test and debug." And then I just included my local WP, you know, dev domain.

**[5:29] Speaker A:** This alone increases the quality of the agent's work tenfold or a hundredfold or a thousandfold. It needs to be able to run tests and see the local WordPress installation, but that's all I did. I just said, "Hey, here's the local dev URL." At this point, I'm ready to set up the basics in my node server folder. So, I'll create a new file in that folder, name it server.js. That can be blank for now. I'll create another file in that folder, name it .env. Let's set up two variables. So, I'll say like socket.io

**[6:02] Speaker B:** There's nothing special about this. You could have made up your own variable name. Now, include an actually secure value here. You get the idea. And now, let's also have Again, you can make up any name you want, but I'll name it like WP origin, and I'll just set that to equal my local WP, you know, like my local dev environment. Obviously, when you push this to production, you would set this variable to be your live WordPress website. I'll go ahead before I forget, I'll create a gitignore file in this project. So, get ignore in my subfolder. So, node modules, you know, .env, a max system file, that's about it. And then, this is just personal preference, but I like to manually install the packages that I want to use. I've found that sometimes AI agents install really outdated packages. So, let me open my terminal pointing towards this folder, this subfolder.

**[6:51] Speaker B:** So, you can just right click on it, open an integrated terminal. That way, it's pointed at this folder, not my WordPress project folder. And I'll just say, you know, npm install. I want Express. I'll explain why I want Express in just a minute, but I want Express, socket.io, and finally .env. Okay? That's it. From here, uh I can have the AI agent really do most of the heavy lifting. Now, I'll let you know, you might be wondering, why did I include the Express package? I have found that hosting providers, if they see that your project uses Express, just the act of deploying your project becomes instantaneously easy. All of the default options, all of the configuration, it all just magically instantly works. Anyways, from here, I will just start my prompt. I've noticed that voice-to-text has a hard time with like folder names and file names.

**[7:40] Speaker B:** So, I'll probably start out by typing and just say like, in my node- What's it called? Socket.io-server folder, inside of server.js, and now I can use the microphone. Please set up an Express.js website. Have the homepage route just say "Hello, world." But, I also want this web app to use socket.io. The root folder of this entire project is a classic WordPress theme. When someone visits an individual pet on WordPress. By the way, I have a custom post type called pets, and when you view an individual pet, that's obviously going to use, you know, the template file that's named single-pet.php. But, when a viewer visits a pet on the public front end, I want the adoption price if there's a custom field called price. I want it to subscribe to the Socket.IO server and listen for updates. So, in the WordPress admin dashboard, if someone updates a pet and changes their price, that should communicate to the Socket.IO server, and then any and all public visitors that were listening for updates, their price for the pet just

**[8:53] Speaker B:** instantly updates. In the Node, what's it called, {dash}socket.io server, you will find a {dot}env file that has a token value, and don't let anyone broadcast. So, first of all, the visitors to the site on the public front end, they cannot broadcast anything. They can only listen on Socket.IO. However, the admin inside of the WordPress dashboard, when they change the price of a pet, it will have that token, and only if that token is correct, let it actually, you know, push uh like an update or broadcast to the socket.io server. Also, uh in the {dot}env file is the WP origin. So, just make sure um that the connecting users are coming from that origin domain. All right, let me go ahead and run that prompt and see what it can do.

**[9:44] Speaker B:** Okay, so the agent finished, and I just tested it, and it worked on the first try, which is actually bad. I didn't want it to work on the first try, uh because technically, WordPress shouldn't have permission. Remember, I gave it that token, and I said only if the token matches should it broadcast. But, check this out. Here's the public front end, Barks A Lot, the adoption price is 89. Down in my console, I said 2 + 2 is 4 to prove that the page isn't reloading at all. It's just actually live updating this. So, let's change Bark's Lot's price from 89 to like 39. Click update back on the public front end. Perfect. It updated. The console didn't get refreshed. I mean, this is great, but it leaves me one huge question. Hey, thanks. That works perfectly, but I'm a little bit confused how it's working.

**[10:27] Speaker B:** I didn't give WordPress um that token. So, how is it getting permission to actually broadcast that? You need to make sure that it's matching whatever token is in our um our our node .env file. Can you give me a little bit of code? Don't include my actual secure value, but give me a little code that I can include in my wp-config.php Let me just change that file name. It would be wp-config.php. All right, let's run this prompt and see what it can do. All right, this is where things are getting truly interesting and this just shows the random nature of agentic coding. The first time I built this feature off camera last night, um the agent was a genius and it understood everything fully and I loved the solution and architecture it came up with. This time, I don't know if my prompt was like overly specific or it's just random nature, but I don't like what it did at all.

**[11:22] Speaker B:** So, it is telling me, "Oh, yeah, your WordPress theme files are just digging into your node socket folder and reading the .env value that way." Which is just utter nonsense. That's ridiculous. So, here I have my wp-config.php file. This doesn't live in your theme folder. This lives in the root of your WordPress installation. And the first time I set this up, the agent was like, "Here. Just define the token and uh where the socket.io, you know, the URL for the socket.io server." Made sense. So, I'm going to need to coach the agent a little bit to to use this similar architecture. No. No. No. The WordPress files cannot read anything from the node folder. I only have that node folder here for convenience and so you can read all of the files. In the real world, these two projects are going to live on a completely different servers.

**[12:16] Speaker B:** So, give me a little bit of code, PHP code that I can put in my wp-config.php file, where I can define both that token value and also the URL for the Socket.IO node server. Obviously, don't just give me that code, but also, in addition to that, adjust all of the code to pull from those values dynamically. Okay, let's run that prompt and see what it can do. Okay, so the agent finished that adjustment, and I have these two lines in my wp-config file. And you'll notice I have the wrong value on purpose as my token value. So, I want this to fail. I don't want this to work. Here's my front end, in the console, I'll say 2 + 2 just to confirm that nothing's actually reloading. Let's go change that price now. So, in my admin dashboard, I'll change the price to 99. Now, I do not want this to work.

**[13:05] Speaker B:** I don't want to see an updated value. Beautiful. Perfect. It failed. Now, instead of the wrong value, let me put the actually correct token value here. And we set that in the ENV file in our node project folder, so that's the correct value. Let me refresh the front end. 2 + 2. Refresh the admin panel, put the price to 19 bucks, hit update. We are in business. Awesome.

**[13:29] Speaker B:** From here, I want to add the feature so that, no matter which page you're on, like even if you're on the home page or an individual pet screen, no matter where you are, if a new pet is added, I want that little toast UI, you know, to show up maybe down here and just say like new pet added, and then you can click on it to go to that new pet. So, let's go set up that feature. That's working perfectly now. Thank you. I need you to set up a new feature now. So, on the front end of WordPress for public visitors, not just when they're viewing a single pet, but even if they're on the home page or any page, if a new pet is created, you know, in the admin editor, if a new pet or, you know, post type of the pet type is created, I want to show a nicely styled like a toast UI element in the bottom center of the screen on the public front-end website

**[14:18] Speaker B:** that says new pet added and then show the pet's name and it's a link that you can click. And if you click it, it takes you to the detail screen or you know, the permalink for that individual pet. Please feel free. Currently, I noticed that there's no new JavaScript file in the classic WordPress theme. It looks like you've probably just embedded the JavaScript in functions.php or one of the theme files. So, please feel free to create a JavaScript file and include the code there and then load it, you know, use the idiomatic WordPress way of on queuing JavaScript files in functions.php. All right, let's give that a test. All right, moment of truth. I'm about to click publish on this new pet whose name will be Longfur. Let's go ahead and click publish. In the background, we see this immediately popped up, this little toast message.

**[15:06] Speaker B:** Can I click it? Yes, I can. That's exactly what I wanted. Very cool. Let's make sure it didn't break this feature. So, let me let me adjust the price, the cost to adopt Longfur. Let's put the price down to what? 49. Click update. Beautiful. Just updates in real time. I'm almost ready to go live. I'd probably just do a quick check on the server.js file. So, I did notice I'm not sure what's going on here. I don't feel like that's necessary in terms of like getting the .env ready. I've never needed to include this path nonsense before. And then I also noticed down here, why are we defining like this local IP address? Like that doesn't seem necessary either. So, I don't know. I'd probably run one more prompt here. Everything is working perfectly, but in server.js, when we're just running config on .env, I don't think you need to include that path nonsense.

**[16:00] Speaker B:** I'm pretty sure you can just call config. You know, correct me if I'm wrong. And then also down at the bottom of server.js, I don't think you need to define uh like a local IP of 0.0.0.0. I don't think that's necessary at all. So, please uh just do a quick double-check. Make sure everything, you know, do a sanity check. Make sure everything looks good. And then, uh, you know, I'm going to be pushing this live to a hosting provider. So, just make sure that everything's flexible. Like, if they don't want to run on 3000, that that's okay if we're defining it here. But, make sure that it's trying to pull from a environment variable first for the port. Cool. So, that cleaned up this line. And then down at the bottom, we're not trying to set the host to 000. This looks good to me.

**[16:44] Speaker B:** At this point, I'm ready to go live.

**[16:46] Speaker B:** Now, I'm not going to bore you with pushing to a GitHub repo, but the next step would be to just take this subfolder, not the WordPress classic theme, but this Node socket server, this subfolder, push it to a private GitHub repo. Perfect. So, that's what I have here. And from this point, we're ready to go live. Huge shout-out and thank you to the sponsor of this video, Cloudways, specifically their velocity product, which is managed Node.js hosting. This makes it so easy. There's no serverless architecture. It's persistent. It's always on, which is what you need for a Socket.IO server. Always on, you don't have to configure third-party services for file storage or databases. It's just simple, powerful, easy to set up. You don't pay per app, you pay per server. So, here I have a server. I have that one example app that I showed you at the very start of this video, but let me show you how easy it is to add a second app to my server.

**[17:45] Speaker B:** Just click on these three dots on my server, click add application. It's that easy. Okay, from this screen, you just connect your GitHub repo. So, yes, it's this repo of mine, cloudways-socketio. I'll click continue. Now, this screen, this is why I used Express, even though I probably didn't need Express. It auto detects that I'm using Express, and all of the default configurations and options just magically, instantly work. Zero configuration required. Now, someone in a previous video did ask me how do you set up like your own .com? This is where you can set that up. So, while you're, you know, choosing your GitHub repo, setting any NPM build settings, this is where you could connect this to a real, you know, .com domain. In this case, I don't need to do that, so I'll just click deploy now. I could have added the environment variables right there, but it's going to take a couple of minutes just for the very first build.

**[18:38] Speaker B:** After the initial build, uh future subsequent builds take maybe like 5 or 10 seconds. However, while that's building for the first time, let's get ready to get our environment variables set up. So, back in your node server in the .env file, you'll need to move over these two values into the Cloudways dashboard for that project. This can stay the same, or you know, hopefully you chose a really long secure value, but this value, this would be different. You're not going to point towards a local dev copy of WordPress. Now you're going to need a URL, like an HTTPS, a real live on the internet WordPress installation. Here's the overview screen for my new app, and obviously the deployment failed because I don't have any environment variables, and the application absolutely depends on them. So, in the left-hand sidebar, click environment variables. Perfect. Because you can have multiple apps on one server, it obviously needs to run each app on a different port, so 3,000 wasn't available, but it it knew what to do automatically.

**[19:38] Speaker B:** Let's click add variable. I won't bore you and do this on camera, but just this is where you would move over both the label and then the value. Here I've got those two values, and now my WP origin is not my local site. This is a real website, a real subdomain out on the internet. Let's go ahead and click save. And now I haven't tested this. It's probably smart enough to uh restart the server so that those new values are being used, but just to be absolutely sure, you can just trigger a fresh redeploy. So, deployment management, you can just click redeploy. We see the first one failed because we didn't have environment variables. This one's in progress, and it will probably only take another 5 seconds. Yep, status success. So, now I just need to go on my live WordPress website, and I will off camera, because it's not rocket science, I'll just use that new classic theme and adjust WP config to use those values.

**[20:29] Speaker B:** Let me show you what I just did off camera. So this link right here, this will show you the URL for your node app. So you would just copy that into your clipboard. And then in the root of your WordPress installation, there is a file named wp-config.php. So this is the token that you need, otherwise you don't have permission to broadcast data over the socket. And then this, this is that new URL of my node.js app that's actually running on the live web. So I made sure my live website has this. Here is my WordPress website that's actually up on the public web. You can see it has different animals. We've got Hammond the hamster. Click on to Hammond's detail page. So $29. In this window I have the admin panel on my live website. And let me just change Hammond's price, his adoption cost to 59.

**[21:18] Speaker B:** And as soon as I click update, that was fast. So you can see even when it's not running on my local network, even when it's one external server to another, it's still nearly instant. Let me try creating a brand new animal to test out the toast notification. Okay, I'm about to click publish on Happy the Dog. There you can see the photo. Let's click publish. And instantly we see new pet added, Happy. I can click on that. Awesome. So to summarize everything, the client side of our public front end website, just a little tiny bit of JavaScript is connecting the client side to this external node app. That tiny bit of JavaScript is then leaving a socket open listening for updates, and then only our WordPress back end has permission to broadcast updates on that socket connection. And then I did want to stress this just in case you want to implement this for any of your projects.

**[22:09] Speaker B:** When I went live with my theme files onto a real WordPress server, absolutely make sure that you're using Git so the Git ignore takes effect so that you're not accidentally pushing your node server with its .env file and all that. That is a totally separate project. It's just in this folder so that it's easy to write code for both locations. If you're not using Git and you're just dragging and dropping files, that's okay, but just make sure that you unselect your node folder, right? So, you would move over everything but your node folder to your WordPress installation. But, that's a wrap. I'm sure you can use your imagination and think of fun ways to implement this in your projects. Once again, I want to give a huge shoutout and thank you to Cloudways for sponsoring this video. Velocity is their managed Node.js hosting and it could not be any easier.

**[22:54] Speaker B:** You give them a Git repo and you get an always-on persistent file system, predictable pricing, simple setup, powerful servers. I recommend you check them out for your next node project. You can use promo code BFCM802 to get 80% off 2 months. And that's for all of Cloudways products. And that discount is good until December 4th. You'll find a link in the description and pinned comment with that code already applied. Thanks again for watching until the very end. I hope you feel like you learned something and stay tuned for more web development tutorials.