PHP WebSocket Chat – complete tutorial


Hello, and welcome guys to new video on YouTube to my channel [first] of all I want to say that this video will be the Maybe one [of] the only videos that will be in English language first of all because I’m a very bad English speaking person and second because that’s only by a request so I want to do this tutorial again in English So okay. Let’s get started with this First of all I want to show you What the blood socket chat looks like what its? features are and What you can [expect] from this code? so Okay to clients now [logged] into this page My chrome browser on the left side and [my] attorney to chrome browser on the right side So these two Clients act different so I Send a message Like hello to the chatroom, and you can see a chat on [the] left side displayed the client five nine [two] with a message hello and on the right side I get the same message, but on the right side it’s Dark so it’s black displayed and the left side little bit greyed out so you can see that. This is your message [I] type of message again to all so I want to say hello to all and in this [chatroom] and Maybe the first client will answer it like I-59 [-] so you see this works actually this Ids are randomly ids get from the Socket [I]? Will show you later how this works, but you can put a login script or something in front of this and Send their the Id or the username with it would be something better to do but I’ve done it for reasons so Let’s go with this shit [when] [I] reload the Akagi’s jet the messages are gone, and I can send as another user So you see the ID changes Okay, so let’s get started with the code first of all In the comment line, I started this websocket with in the direction of my server It’s on the local server installed, and I started it with the Php Exa and started the Php file That’s in my server directory [I] share with you [guys] to link to my Google one a Google drive Folder so you can download the [whole] thing I Show it to you really quick. So the server is [running] I can stop it real quick here and Start it again So it’s running now [does] it’s that file here? Just follow sorry [I’ll] open it up for you, so we can Go through it later next you will need a bundle folder with composer installed and in this vendor folder I get some Auto loads, and I used to library ratchet for this [I] will This folder will will [be] in the download link also So you don’t have to do that you for yourself? then I have Javascript files jquery so make life a little bit easier. I Got a class folder. There’s a DB class file in here [you] don’t have [to] use it because that’s the status actually Not connected with database, but you can do with the class that I wrote in here You don’t have to use it you [can] use your own if you [want] to but I leave it there so you can download Ok yeah, that’s the first you need it [of] course an index.php file is also there and [I’ll] show you this files right now [ok] First of all [I] get the index file which creates an session randomly. That’s my user Id right now I Connect to check very file of course do a little bit of styling nothing really big get an output area get an input field and Got my functions down here There we get later So next to fold the server itself [I] set a time limit to [zero] so the script can run and run and [run] and Will only break the scenario [or] course or something? Ok then uses the name spaces for wretched library It uses a little bit of an interface and then the server and something you get from [Rachet], you can read that At the record that I always think what’s the website and maybe put it in the description, [too] so yeah, [I] Put the auto load file in here The class jet which is this file? implements the method component interface Yeah, I know The file isn’t named right, but it’s only for tests, so I Think you guys can do it better So I get two variables here called clients and users the users variable is not used in this tutorial, but I put it here for purpose [I] explain later why so then I get an incorrect constructor which Instantiated an sPL object storage at the clients variable What that is you can also read [that] at the home page? It’s just a storage light the database storage something so yeah, I got a little bit of functions here like four pieces of them and It’s for open stage closed state message state and error state error [State] is Really easy to explain close the connection of course [the] open State the open function open method Connects the client it attaches the connection you get a neglected interface through this method and attach it to the [client] This one is also. That’s the one I would like to explain I Get from the connection the resource. Id so this is the user id which is generated by the websocket and save it in the users array, and save there the connection to care so I can Use it later on on the in the on message function But I don’t use it in this tutorial so it’s not there [for] Use yep, you know English is not very good So you don’t have to use it I? Come at it out so also in the unclose function there’s the same thing you detach the connection from the clients and Your unset it Yeah, you know And in the unmess it function you get two parameters. That’s from That’s a firm object from which the message is sent and the Data object which also Contains the Data we send from the client. This is what I show you a little bit later now I save my ID from the Client that sends the message. That’s the resource id in the front object and the Data object is [Jason] so ID cuz it’s Jason and I get the type and switch this type through and Send them the message out [I] get here in detail later on So now down here. [I] start the server at Whichever Ip or domain you’re running this server on For me. It’s localhost, and I run it at port 88 you can here Determinate Which port you want to run the server on and? yeah, you could to go and Run the server that’s all you [text] on the server side and In the client you have to do the following you connect to the Web socket with [Wf] double point Localhost double point port when you want to do [wss] for secure Web socket you have to install Ssl, certificate and of course Put it in the config files of your server If you want to do that I’ll maybe do a video about that in the future future but not right now, [okay]? [so] then we get an unopened method or here also We sent in the unopen Data to the server we sent there that we’re logging in and It’s type socket [I] called it socket, and I put the user id here which was created above on the top of the file Top in the file, whatever and so you know what I mean, I guess So on error there you can do a little bit of error handling. [I] don’t do that at the moment You can do so if you want to on message is relatively easily easy you parse the Chasen which you get from the event [pull] Data event Data you know yeah, and Switch that and in case of chat event you put out word debt in the Dis chat output? And appended there [I] append [there] chasing that message. I call the dead variable message and Yeah, I show you why this is called in the server-side later on? Now we get to the event handling from the input Field I Do this onkeyup and I check for the enter key [and] Shift Key so if you press Enter and shift you get a new line, and you press enter if you press enter you send the message at the Moment the you press [enter] the message is stored at chat Machat message variable and You send this variable to the server to the web socket With stringy for Jason the type chat the user Id and the chat message After that it clear the text area so you can start from scratch? Yeah, that’s from that for the Index now. We get a little bit in [detail] on the unmess [Egde] method in the server [here] we switch the type of the data we get and in case of chat [I] put the user Id in the variable the message in the variable and I create the HTML for the response of [xander] and this response of the receiver so the client that receives the message get a little bit of an different looking HtML than the sender of course you’ve seen that before with a little bit grayed out styled message and then start we start the output the from user Gets wire sent Method A Json Array adjacent Data with which contains an array in Php and There is the type we get from the client so the types in this case chat and the message is the response HtML message for from of course Then we loop [the] loop through the clients that are logged into a site to our site and we look for Every client that is not as of course. We want they don’t want to get the message twice and send it to the client to each client and Send it. Why are chasing a code and put the array of [the] type and the message in there? That’s it on the server side What I wanted to point out here is This one the event data object contains the type which I mentioned [before] so this type is Jason dot type and Switch it. This will be k [jet] case [chet] And jason that message will [be] the message, so the HtML Markup which was defined here Yeah, that’s the matter magic of the websocket server. I got here um anything else I want to point [out] I Think that’s it for this tutorial guys. [I] hope you Understand what I wanted to show you [I] know, I’m not best English speaker. I can only repeat myself. [I’m] sorry for that, but I Guess you get what I wanted to say so thanks for watching anyways and please Be sure to leave a comment. If you liked what you see and leave feedback as always so stay tuned for next videos and That’s that was it for now peace out

66 Comments

Add a Comment

Your email address will not be published. Required fields are marked *