Websocket push messages to a specific user with Spring Boot - STOMP - Part 3

[Music] hello everyone welcome to another video in our websocket with springboot tutorial series some of you have asked me how we can send some messages but only to a specific user and i haven't talked about that so i decided to make some video to explain you guys how you can do it and don't worry it's actually quite simple so um let's just get straight into it i currently have the application running so whatever we did in the previous two videos is currently just there and i have opened the localhost 8080 in two browser windows i have one window in my chrome where i opened it and also have an incognito window um in again in chrome but you can also use a different browser to stimulate this basically what i want to show is i want to simulate two users being logged in so i have one user here and i have one user here and as you can see if i send for example this hello to message with our current state every user gets this message what we want to implement now is the possibility to send the message only to a single user so i want to say for example from somewhere i want to send a message only to this user here or i want to send a message only to this user here so in this video we're going to be uh implementing that we're going to see how we can uh yeah get it to work okay so let's just start um if we go back to our intellij and uh take a look at the files what we have here you can see that i don't have currently any new changes everything is the same as you should have it the first thing that we want to do is we want to implement so-called user handshake handler so this will be used by us to identify our user keep in mind that we don't have any um complex application here so there is no way for our user to to authenticate himself we don't have a database we don't have created users we don't have things like that so what we are going to do in this handshake handler we are going to just give this user some random id it doesn't really matter so every time you log in uh or every time you refresh your page you will get a different id but that doesn't really matter for us here i just want to demonstrate you how you can send a message to a specific user so let's just create this um i will going to cr i'm going to create a new file so a java class and it will be called user handshake handler and here in this uh file we are going to assign a random id to our user so let me implement it and then i will explain you what we are exactly doing there so here it is here's our class as you can see it extends this default handshake handler so this is something that we're going to be applying to our config later on but for now um you can see that we are overriding this determine user method where we create let me just make this final so where we create a random id which is going to be used to identify our user and we are returning this user principle with the random id that we just created so it's actually quite simple um let me copy this and let's go to our websocket config so in our websocket config we have this register stomp endpoints method here we have our registry and we add some endpoints that we are using and here before we go with sock.js we can say set handshake handler and we are going to set our handshake handler the user handshake handler that we just created so basically what should happen now we can actually start our application so what should happen now is every time we open up our localhost 8080 we should be able to see a message with a user id so let's go to chrome let me refresh the page go back to intellij and you can see a message here user with id blah blah open the page so this is how we find out the id of the user that currently did it so if i would do this in in chrome so in the incognito window i have we got a different id so every time it's a different different user different id basically many times i would refresh this you would get different ideas here so the user id would change every time you refresh a page okay perfect so we have handled uh two important things we have created our handshake handler and we have applied to the config now what you want what we want to do is close this and go to our uh websocket controller actually it's not not this one we want to go to the message control first and here we have our way of sending messages so basically this is like sending global messages this is how we do it uh let's copy paste this here and uh let's change this bit get let's name it get private message um so get private message we have our message mapping maybe we can name it private private message and the topic is private messages now other important thing is instead of at send to we want to use add send to user so we want to change this annotation so this is going to be sent only to a specific user and not to everybody and also with the message we are going to have our principle great now we have our message we have our principal and we want to basically change this message a bit and let's say um let me put this here maybe something like sending private message to user blah blah let me just format this a bit better so sending private message to user and here we are going to provide our username so principal get name so from the principal object we get our username or which will be our id so the one the random ones that we create and here we just abandoned and the rest of the message which is whatever we send uh from our front end so whatever we type in there that's it actually quite simple so nothing complicated um here so the backend is basically done um we have everything that we need for now we're going to extend uh something else later on but uh let's not rush into it let's go to our front end so let's go to the script.js um here what we have is basically subscriptions to different topics so what we want to do is we want to in the connect method we want to copy the subscription to the global topic and let me just format this a bit better um we want to subscribe to the topic that we just created so to this one so we can copy it from here uh paste it here so topic private messages but important thing is user before slash topic because this is a user topic it has this slash user and the rest can actually stay the same so we don't have to change anything here um that would be it now for our send message method we have um sending of the global message which goes to this vs message endpoint which is basically this one but we also want to have a way to send a private message so let's go copy this and send private message sending private message and we can copy the end point from here so for this one we don't have to append anything it's private message how we created it again the content and everything else is the same we don't have to change anything here and we have to update our html so let's see where our um we have this one button which is id send and this will send the message but let's um uh yeah let's copy this entire row and use this id private message let's name it like that so we're just going to have a private message here label for private message let's name it private message send send private and let's name this send yeah something like that it doesn't really have to be fancy at all um that's about it and the message will be are shown here so let's uh restart our application and see how let's see yeah let's see how it looks like hopefully um it does work and we did not forget anything so let's go here refresh so that we get our new content and the styling is not that nice but we can make it better and i just removed our incognito window and here we have our incognito so let's um yeah let's send the private message here sending private message and it does not work for some reason let's see why so user topic private messages and that seems fine we have destination we are going to subscribing to it but it's not sent did we yeah we didn't hook up the the send method so um if we go to the script uh show message send message send message that's here and this is what we're missing send um it's called send private and we want to send the private message on it and not the send message and let me just forward this let's restart our application and hopefully now it works a bit better again we go to our chrome we refresh it then we go here we refresh this one and now we send a private message as you can see this uses got the private message this one did let's send the global one uh some message yeah graphics are horrible whatever um but as you can see the global message was received so both users got the message but um the private one was only received to this user now uh let's try to send a private message here and you can see that we also get that perfect it seems to work and the only thing that we seem to be missing is the actual message so we have signed private message to user blah blah but there is no message appended so let's see what could be wrong there uh message get message content so we do get it but it seems like we don't get the message content for some reason and what might be so let's just debug it let's put an endpoint uh breakpoint here and let's send a private message and we have hit the breakpoint and the message content is empty interesting why would that be okay i'm not sure we're going to have to figure that out for ourselves so we go here and let's see what we are sending message content is the content of the message which is wrong because we want the content of the private message so so we are saying we were just taking it from the wrong field so let's uh restart the application and see again if this works let's refresh it and um let's send private message and we have hit our endpoint and we have some content perfect as you can probably already notice this application that we have so far is not that good i mean the private messages that we are sending they are being sent from us to us so basically you're sending yourself a message which is not kind of cool what we would like to implement now is a possibility to send a message from some source like for example from our postman which is just a rest client so from here to one of the users that's logged in so let's take a look at how we can do that if you remember in our controller that we had uh or that we still have we have this send message endpoint basically this will just send a global message to all of users let's um copy this and create another method here uh let's call it send uh yeah let's send private message send private message again change endpoint um send private message here we have in the body we have the message itself what we want to add now is the path variable so we want to add an adu so a user id and here it is so the path variable string which is the id but the path variable basically means that you can add it to the endpoint like this so our endpoint plus the id and that will come to the send private message now as you can see in the service we have the notify frontend method middle mouse click uh allows me to jump to it by the way and here we want to also duplicate this and name it uh notify user maybe and we'll provide final uh string id so we have our user id and the message and here we want to change so the messaging template convert and send we want to convert and send to user to user and this expects the user name which is basically our id the destination should be the same one as we go here and basically it's this one except we don't need the user part so um we just need the topic messages so let's uh paste this topic private messages and then let's go back to our controller and call not notify user and passing the id let's restart our application and then you'll see what we want to achieve here so once our application has started i can clear this let's go to chrome refresh one user so make it re-login basically refresh the other one and then if you can take a look here you can see that we have one id uh let's copy it from here let's go to our postman and this is the global one so let's say um this is a message for all users we send it then we go here this user got it and this user got it but now if i would go here and send the message on send private message and then paste in the user id that i copied and send this you can see that um this guy gets it because his id we copied and this why this guy did not get it because we didn't copy his id if we would do that now if we would copy the second id now only our incognito window should get this message so we paste in the id here and send it and you can see that he got the message and this guy didn't get it so this is the previous message so as you can see it's actually quite simple to send user-specific messages same would be with some notifications that you want you would also identify your user and then just send him a push notifications or just to him or if you want to do a push notification to multiple users or to all of your users you use something like this hopefully this was clear enough and if you have any questions leave me a comment or just send me an email and i'll try to respond as soon as possible and yeah that would be everything for this video and i guess i will see you in the next one [Music]

Channel: Lilium Code

Views: 2,915

Keywords:

Id: LdQY-OUM2mk

Length: 17min 28sec (1048 seconds)

Published: Sun Aug 15 2021