 Hello, developers! My name is Matt Raebel and today I'd like to show you how to build a chat application using Socket I.O. and React. Let's giddy up! This screencast is based on a blog post that we published back in July of 2021. You'll see it was recently updated here in December and it shows you basically how to build a chat application with Express on the back end, React on the front end, communicating with Socket I.O. Down at the bottom it links to a GitHub repo, also this GitHub icon right there goes to it, and I have it open here and I created a demo.adoc that is a script I will use for this screencast. It's basically a condensed version of the blog post with just the steps that I'll need to develop everything. So if I click on the raw version, I have a handy dandy ASCII doctor plugin that renders it nicely in my browser. And you can see that first of all we will need Node 14, so I'm just going to put this over here on the left, open up a terminal window here on the right, and see what version of Node I had. It looks like I got a Node 14, so I'm good to go there. I also have the Octa CLI installed. So if you need the Octa CLI, you can go to cli.octa.com and there will be instructions for installing it there. So you can see the table of contents kind of outlines everything we'll do, but before that I want to mention IntelliJ Live Templates. These are snippets of code that I've prerecorded, and basically I'll type a word or two and it spits out a whole bunch of code. So you can find all of those definitions and use them yourself if you like in my IntelliJ Idea Live Templates repo. And we'll start by creating a chat server with Express and Sakadayo, and then we'll implement a client for that with React, and then we'll add user authentication with OpenID Connect, also known as OIDC. Then we'll add it on the server, we'll add it on the client, and then we'll see it all working. So the first thing we're going to do is use MPX, Express Generator, to build that chat server on the backend. It'll prompt us to install it, we'll say yes. And there it goes, pretty quick, huh? So then go to chat server, and install everything. And then we'll install Sakadayo, UUID, and Cores, Cross Origin Resource Sharing, Cross Origin Resource Sharing, that's what Cores stands for. And then we'll go in and create a chat.js. So I'm going to open this up in IntelliJ, and we'll put that on the right, put our instructions on the left here. And we'll start with creating that chat.js, new file, and this is where our chat server goes. This is one of my live templates there. And you can see it starts by importing UUID, and setting up messages and users. And then in the connection constructor, it basically configures Sakadayo. So on get messages, it'll call this method on send message, call this method, handle messages down here, and then set the time out accordingly. So it's always looking for new messages and deleting those accordingly. And then disconnecting. And so this is the setup and the export of the module. And we'll open up bin www, and we'll add these two imports at the top. And then where it says create HTTP server right here, we'll add our Sakadayo server. So that's where you configure it. You set up cores to allow any origin. Of course, if you're deploying in production, you might want to lock that down a little to say only these clients here. And then need add support to the express server. So that's an app.js here. And we'll start by importing cores. And then where it says app equals express, do app use cores. And then we can start our server, MPM start. Okay, our back ends up and running. And now we can create our front end. So I'll do this in a separate directory, not in the same one. So CD up a level, and then MPX, create react app chat client. And once that's finished, you can CD into it and install Sakadayo. We're going to do exact version 440. That's what the dashi does. So I'll get that IO dash client. All right, and then we'll open this one up in IntelliJ. And we'll open source app.js. And we're just going to replace this whole thing. You'll see it starts with importing just regular react stuff. And then it has this function for the app. And it uses sets up the state and then has an effect hook here, where it sets up that connection with Sakadayo to that back end on port 3000. And once connected, it will update the socket state, and it takes in that dependency there. And then down here, if the socket is enabled, it'll go ahead and bring up the chat container and show that. So we're going to have to create two components, messages and message input. So we'll start with creating that file, and then we'll go back and grab this one as well. And so first of all, we need to give some styling to the app. So that's my shortcut here. So it's just setting up the header, making it look good. And then setting up the chat container itself. And then in messages.js, we'll display the messages sorted by the time stamp they were created at. So this starts off with that messages function, sets up a message listener, one for deleting as well, and then configures all of those for Sakadayo. And then down here, it basically shows the message container. And you know the user message and the date. And then we need to fill in the CSS for that. So there's up here at the top, there's that messages.css. Create that file. And then we'll put some CSS in there to make things look good. And then in source messages.js, we already have that one. Now we're moving on to message input. So this is just the input field that you know you can type messages into. So you'll see the submit form handles everything. It does that Sakadayo emit sends that event. And then it catches it, you know, in that messages component. And so this is the form, the input at auto focuses tells you to type your message. And then we'll add some CSS for that. And it's just, you know, widening the form and giving that input some nice styling. And then our client is now complete. So both the client and server unfortunately by default run on port 3000. So we need to configure just this chat client to run on a different port. So we'll just do a .env file and create react app sets us up. So this will work by default. And so here we can do port equals 8080. And then we can start our client. So we already have our server running in the back end. You can see once that's up and running, you can start typing your chat. So hello world. And if you were to do it in another incognito window, well, the bulls show up anonymous because there isn't any identity associated with this information. And you'll notice here, there is this error. I did actually Google this yesterday when I was practicing. They are aware of it. I was able to reproduce the problem. So hopefully it'll be fixed. But it's just a warning. You don't really have to, you know, worry about it really affecting anything. Now we want to add authentication with open ID connects. So we actually have identity from who's chatting. So the first thing you'll need is octa CLI. So I already have that installed. You can run octa register if you don't have an octa account. And that'll actually configure everything for you. You just need a username or a user, like a first name, last name, email, and I think company name. So I've already got everything configured there. You can do octa login if you actually want to log in to your tenant. Just click on that link. And I'm going to start with octa apps create. And so we'll just do chat client or we'll just do chat with socket. I have. And then we'll do a single page app. And then for the callbacks, we're going to want to use localhost 8080 log in callback. But you can use anything you want, like whatever you specify there, you just have to have a route that handles it with the appropriate octa component. And then the default logout redirect URI is fine. And we'll choose our default org server. So if you have multiple authorization servers, if that one's configured properly, your second one, then everything should work just fine there. And so now what we'll do is we'll go into octa login because we need to create an API token as well. So that chat client can actually talk to our server using the node SDK from octa. So we'll log in here, open that up and we'll go into security API. And I'm just going to delete this one because I don't need it anymore. So deactivate and delete. And then tokens. We had one yesterday I created, but I don't remember what it was. So create a new one. Now it's called chat token here. And then we have that value. So make sure and copy it. And we'll put it in a clipboard over here. And so now we have our API token there. We can close that. Back to our instructions and put those back on the left. And so we have that token now. And now we'll need to install everything you need on the server for doing authentication and JWT validation. So stop that with control C and then install the JWT verifier and the octa node SDK. And then in chat.js, we'll add an authentication handler up here at the top. So we're going to use chat server for that. And now let's look at this. So it's got a JWT verifier there. It configures it for octa with your client ID and your issuer. So we'll want to replace this with what we have in our other IDE window. Where to go over here, chat client. So we got that client ID. We'll just put these in this notepad here. So we have all those values. Put the client ID in there and our octa domain. And we'll need that down here as well. And this is for that octa client to talk to get the API token and set that up. And so this octa client is used to get the user's information. So, you know, you're passing in an access token but it needs more information about the user. So it goes and gets its name that way. And this is how it verifies that access token that comes in and then it sets everything up accordingly. So we close that now. Now we'll need to set that authentication handler down in our chat function here. So that's just io.use.auth handler. So my colons are optional, but I tend to use them. And then start up the server. And now we've added octa to the server. Let's add it to the client as well. So here we can install octa react and octa auth.js which is a companion library for react. If you're using MPM six and above it'll actually install that for you but we put the instructions in there in case you're using an older version. So this will be installing that as well as react dom and react router dom. And since this app is already configured, right? With this port number we can configure these values as well. So react app octa org URL and octa client ID. Anything prefixed with react app will be automatically available with process.env that global settings over here. Client ID and octa domain. And then open the index.js. And in here we'll add our octa configuration first. So this sets up that octa auth and it uses those variables that we just specified. If you wanna use a different callback like all you have to do is change that value right there and then change the path right here. And once that's set up we can go in here and change this to be router and secured routes. And so that's all we have to do to set up the octa authentication on the front end. But we also wanna have a little more logic. So in off.js we will configure some hooks for authentication. So this is a use auth constant there that gets the state of octa auth. And then if they're authenticated it gets user information, sex token. So you can use it when you call the server. Otherwise it nullifies everything and configures it accordingly. And then the use auth, right? This function right here will be used as a react hook in the main application component. So going to app.js, we'll import those. And then start of the app function. We'll modify the use effect hook to send the token when connecting to the server. So we have this new socket here where it sets everything up. And we just need to pass in the token if it exists. So add that. And then we also need to configure the token as a dependency there. And that should come from one of these. So I forgot to step here. Oh, that's the chat auth hook. Okay, so that just imports from use octa auth sets up login and logout buttons basically are functions that you can call from those buttons. And then gets that token and the user. And then we'll replace the header down here with basically sign in sign out buttons as well as the user's information. So you can see based on the auth state it either says it's loading or if the user exists then it'll show that you're signed in, allow you to sign out. If you're not signed in, show you the sign in button. And now we can start this to see it all working. So no one signed in, if we said howdy, it would just be anonymous. And now if we sign in, since I already signed into my octa dashboard it said, well, we're already signed in. So no big deal. Hello from map. All right, now you can see it has my user information there. So if we were to open up another window and then Cognito window, first of all you can add a new user in your octa org. So octa login, go ahead and click on that. It'll log me in straight away. And then if you go to directory people, this is where you can add new people. So I already have my son in here and I configured him to go to my Gmail so I can receive those emails and activated him and everything. And if you wanted to add a new person you could and you can even, you know, set their password and make that all work. So close that out. And then this incognito window you can do localhost 8080, sign in. And you can see it's all working. So pretty slick, right? Like you built a whole chat server, chat client using Socket.io, OIDC for authentication works pretty slick. So congratulations, good job. Right, proud of ya. So you can find the code on GitHub. If you go to this link here you can see octa socket.io, chat example under the octa dev org and the blog post you can click on there as well. Go right to it and this will talk a little bit more about the nitty gritty details of web sockets and all that, but otherwise the instructions should be the same so you can copy and paste all this code instead of using my shortcuts. If you like this screencast, please follow me on Twitter. I'm at mrable, my team is at octa dev and we have a YouTube channel that you should smash that button and subscribe to because there's cool videos like this one and maybe you'll learn something from it. Thank you very much. Have a wonderful day. Cheers.