7.5 How to Create a WebSocket Server in C# - Fun with WebSockets!

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
Hi, this is possible ways and in this video, I'm going to teach you how to write a simple, very lean web socket server in C sharp using the console application. And I'm also going to show you how to connect that to all the previous clients and all the previous applications that we have done in the previous videos on this playlist fun with WebSockets. So, as usual, we're going to start by simply starting a new Visual Studio project. And in I'm going to create a new project. And it's going to be a console application on the dotnet framework. So it's going to be this one dotnet framework, I'm going to put it on my desktop, and I'm going to call it C sharp, C sharp server, okay. And it's going to be on the dotnet framework 4.5 bla bla bla. And as I create this project, you can see that now I have this folder on my server that is the on my on my desktop, which is the server, and I can start writing code here. As we saw on the previous video, I'm going to import the web socket library. So that's I'm going to browse here and I'm going to type web socket sharp. And I'm going to select this one, which I believe is the one that the original one by the author of the of the project. So I'm going to install this dependency. And then now in my code, I can just import that dependency by typing using web socket sharp. Okay. All right. The next thing that I'm going to do is that because I'm writing a server, I actually need to import another namespace, which contains code specifically for WebSocket server stuff. So that's going to be within the same library, web sockets sharp dot, you can see that I have a server namespace that I'm going to need to import here. Okay. Wonderful. All right. So what is next, the next thing that we're going to do is, we're going to initialize this server. So the way we're going to do this is by creating a web socket server instance. So I'm going to do new webs website. So I'm going to do web socket server. And web socket server is going to create a new variable. And I'm going to initialize this web net, this WebSocket server with with the URL where this is going to be leaving. Because this server is going to be leaving on my machine, I don't need to give it a name or domain, what I need to do is I need to specify that the server is going to be the machine that this code is going to be leaving on the way I do that is by typing localhost, which is the nickname typically that we typically use for referring to the machine where we live in. Or alternatively, I could just type the zero there. 127 001, which is the IP that is reserved, always for local host for the same machine where you're living on. Alright. And now the second thing that we want to do is I would like to assign a port, because it's going to live in our machine, machines have different ports, which point to different processes leaving on that machine. So I can just technically, what I should do is I should use a port manager to check which ports on my local machine are open or closed and are busy with other processes. But I know that if I basically if I type a random number, there's a very high chance that I'm not going to hit a port that is being used. And if I do, I will get an error. So it's not it's not a big deal. So I'm just going to choose 789 and zero. Okay. And then what I'm going to do is I'm going to start this server, and I'm going to type some message here, console writeline. Server started on this address here. All right, just just for the sake of having some feedback. And then to make sure that this program stays alive because it's a console application. So we're going to do as we typically do the trick of just requesting a key before we stop the server. Alright. So stop up. What am I doing? Yes. So whenever the user presses any key, then we will stop the server and we will shut down the console application. So let's start this. If I start this, and I'm going to make sure that this window shows up. Always on the screen, you can see that the WebSocket server has started at Nissan this address, blah, blah, blah. So I wonder if I can use my previous code now to connect to this server already. So what I'm going to do is I'm going to copy this address right? I'm going to, I'm going to replace, what am I doing. So I'm going to replace that with my address here, which was in my client. And it was this one here. Alright. So I'm going to try to connect to the server. And turns out that and the WebSocket server that I specified is not really working. It's not really working, because I have not really created any service, all my WebSocket server do to handle incoming connections. What does that mean? What it means is that when you have a server, you have to create some kind of Route, or you have to create some kind of place where clients can go. And then where different functionality have different behavior is served for those clients. So remember, in previous examples, we were doing an echo server that took information and then just send the same information back to the server to the client. So in C sharp, and with the web socket, sharp library, we have to do something like that. And the way we do that is by extending and subclassing, a very particular class that lives in WebSocket charcoaled, the WebSocket server behavior, okay, that is little confusing, perhaps maybe at the beginning. So let me show you how that is done. What I'm going to do is I'm going to write a new public class, that is going to be called, for example, Echo. And what I'm going to do is, I'm going to make sure that I am extending, I'm using as the template, I'm extending a web socket, behavior class that comes with this library. So when someone, whoever the author of this library was, what they did, was they created this template that you can use to create your own implementations of a behavior for the WebSocket server. What does that mean? What it means is now that we have the WebSocket behavior, what I can do is I can override, override. And you can see, I can override certain functions that come with the class. So for example, on close on error on message on open, and this may ring a bell. Because when we saw the client, we saw that we had the event handlers that look very similar on close on error message. So these are basically a way of doing event handling, which is whenever I receive a message from the client, what I want to do is whatever I want to do here, and what I want to do probably is that I want to send, I'm going to write to the console, for example, console writeline received message from client on gram. And then I'm going to print which which I'm going to print e dot data. And then what I want to do is I want to send back to the client, the same message. So that's going to be send that open parentheses d dot data. Okay. Are we all here? Does that make sense? All right. So I think this behavior should work already. But now what we need to do is we need to make sure that these WebSocket server has that behavior somewhere attached to it. The way we're going to do that is we're going to say, we're going to use a slightly esoteric or strange syntax that can't be the library, which is for to the WebSocket server, we're going to add a web socket service. Alright. And you can see that as I was autocompleting, you see that I have the angle bracket notations. What that means is that he needs a type to know what kind of service to attach to this server. What I'm going to do is I'm going to attach the echo class, which is the one that has the code that knows how to run an how to handle the behavior of that server. And then I'm going to open and close parentheses. And inside the parentheses, I'm going to add a an extension to the route or to the host of the WebSocket server, so that that particular route is the one that has the particular Aiko behavior. Alright, so let me show how that works. I'm going to open and close double quotes, and I'm going to add a route with a forward slash that I'm going to call a call. What that means is that any client that goes to this URL, plus this route afterwards will hit a website. conserver that has an Aiko behavior. Okay? Does that make sense? So I'm going to actually copy this here just for clarity. And then I'm going to run this server, okay WebSocket server started on this route. So I'm going to copy this route, actually, oops, sorry, I close the I close the server, I'm going to copy this route. And I'm going to bring it back to my client. So I'm going to here in my client, remember when we will switch from the cloud server with this to the local one. So now what I'm going to do here is I'm going to add another an equal, this is going to be the route. And I'm going to start this code. And what I'm good, you can see that as I do, if I minimize here, the server did receive a message from the client. Hello, from bootcamp. And then the client received the echo message from the server back. So hello from P Comm. And then he didn't know what to do, because we were doing JSON parsing and geometry, etc, etc. Does this does this make sense? So the way so the pattern, this is what I will leave typically is technically referred to the pattern that the web sockets sharp library offers for creating servers is customizing behavior by extending a web socket behavior class, and then attaching those behaviors to the server under a particular route. Which is very interesting, because it also means that we can add several behaviors to the same WebSocket server, just the way in, which only differ in how do we access them. So for example, code, that the code that I've written here is great, but it doesn't really do what we've done in the other examples, which is echoing one message to all the clients that are connected to the server, this, this server would only echo to the one client that is connected to the server. And we can see that behavior. If, for example, I go, we have here, the server. Now this is the clients, I'm going to stop the client, we have the server, right. And then what I'm going to do is, I'm going to go to my client folder, and in the client folder, because I have executed I have compiled in the the code in in debug, you can see that I actually have an application that I can double click, which is the C sharp client. So you see I double click on this, it is open a client, I get the server back and forth. But if I open a second one, you see, this one also gets the echo from the server, but the other client did not receive that message from the second client. And if I open a third one, none of the first or the second ones, get the message broadcasted from the server. So right now it's working on a one to one basis. And what we want to do is we want to work on a one to many basis. So how are we going to do that? Well, we're going to create another, we're going to create another behavior, that is going to be called a call to all. So I'm going to public class a call all and I'm going to extend WebSocket behavior. Alright. And then what I'm going to do is I'm going to copy this here. And then I'm going to blah, blah, blah, received message from, from a co client received message from a co all client, right? And what I'm going to do here now, instead of sending the data, the way we do this with this library with a web socket sharp library is just by accessing the sessions property of the library. And then just saying send to sorry, not using broadcast to have broadcast Yes, broadcast, which is send a message to everyone that is connected to the server. And that's going to be dot data. So let's see if this works. I'm going to execute this code. And this is the server. And now in my client, I need to change from echo to into a COBOL. So I'm going to connect now. Oops, and the current state of the connection is not open. Whoo, what is going on here? Let me take a look at what's going on. Oh, yeah, silly mistake. Remember, on the server, we did create the behavior. But we forgot to attach that behavior to the server. So I'm going to copy this, I'm going to attach another service. This is going to be a call for all right and on this route here. And then I'm also just for the sake of clarity, I'm going to write line to the console that we have two servers, two services and Running on the same server. So now I'm going to execute this code, we have the server that has both behaviors, I'm going to minimize that. And then I have here Echo, which have already executed one. So it is compiled. So we can now go to my C sharp client, the application that gets compiled in the background. And then I can execute this one. And then you can see that I receive a message from the echo client. And I'm going to click for a second time. And you can see that this one received, but this the second client also received the message. And if I do it a third time, you can see that as I connect, the other two clients also receive notifications of this echo. Okay. So, all right, so that was it. And then now if we extended this more, we could just connect them and, and we could exchange JSON information, coordinate and draw the ASCII box, etc, etc. But I'm actually going to leave that up as an exercise for you, the viewer for give you an opportunity to have your own phone as well with this, okay. All right, great. So I hope this was helpful for you. And thank you very much for watching these videos, please consider liking them subscribing to the channel, etc, etc. And let's move on to the next videos in the series and keep finding new ways of connecting different things together and having some fun with WebSockets I
Info
Channel: ParametricCamp
Views: 40,909
Rating: undefined out of 5
Keywords: WebSockets, VVVV, Algorithm, Visual Studio Code, Python, WebSocket, socket.io, Computer Programming, Visual Studio, p5.js, Code, Design, Computational, Geometry, Processing, Rhino, Glitch.com, Learning, JavaScript, Grasshopper, Rhinoceros, Glitch, Parametric, Grasshopper3D, Node.js, Computational Design, Introduction, Unity, Designers, JS, C#, Nodejs
Id: ThiAQAB5Dp4
Channel Id: undefined
Length: 16min 29sec (989 seconds)
Published: Thu Mar 25 2021
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.