Level 27
Are you trying to make a chat room or only alive chat?
Oct 14, 2017
12
Level 2
Laravel Real time chat app
Hello, I'm currently making the front end of a messaging system. And as of the front-end, it's going quite well as you can see in this screenshot: https://imgur.com/a/HdLqZ Here for I want to ask you guys if u know a great tutorial to make this. I, unfortunately, have no experience in making that whatsoever. I can use some great advice.
My problem with all the tutorials I have found so far was that all the message styles were the same. and you couldn't distinguish them from each other. A great example of this is, for instance, Facebook Messenger. The sender's messages are blue while the receivers messages are grey. This means if I send a message it would be blue for me and the message that the person receives would be grey for him. This is also the other way around. I already made the entire HTML and CSS. now I just need to find the perfect tutorial that I can wrap my front-end around. Any suggestion? If ur willing to help with this project I would be open for that as well!
Rainier laan.
Level 70
Have you checked this? https://blog.pusher.com/how-to-build-a-laravel-chat-app-with-pusher/
3 likes
Level 2
@davy_yg I think you can see it in the image that I provided. A user needs to be able to send another user a message. And then that user will be on the side of the message system. If they click on it they will be able to talk to them. Here is a small GIF to make it clear https://imgur.com/a/SYwNy
Level 70
One more recommendation for you. Check following discussion- https://laracasts.com/discuss/channels/laravel/laravel-real-time-chat-package
2 likes
Level 2
@tisuchi I did but they are using one HTML file for the messages. I want to be able to style them differently, For instance, The messages I send need to be blue and on the right side while the ones that I receive are grey and on the left side. And it needs to be for every user. I haven't found any tutorials yet that have that system. They're all just on top of each other and the same style.
Level 70
It's a matter of simple css and php logic only.
The important part to implement the chatting is make it instant chatting. What fetching technology you are using, that is most concern.
If you have html template, just use php logic for that. For instance, for sender, use right side div, and left side div for receiver. That's all.
1 like
Level 2
@tisuchi So the tutorial that you provided can help me on my way of making my system work?
1 like
Level 70
Yes, its for make your real life chat in a right way. That's all. Its not related with your design.
Level 3
@Rainieren hey there classmate! Looking pretty good already, if you need any help feel free to send me a private message, e-mail or tweet
- Martijn
Level 27
I can only recommend you a free chat system like jivochat.com, unless if you want to custom everything that you probably have to create one yourself.
Level 2
@davy_gy I'm looking for a tutorial that is using a similar setup like mine. A system that makes a logged in user, able to send a message to another user by clicking on their name and sending them a message. I haven't found any tutorial yet that is using that concept. As you can see in the GIF in my previous reply, On the side of that system I got a list of people. A user gets added to this list if he/she pressed a button which says "Send message" on his/her profile. If the logged in user clicks on one of these users, he/she is able to talk with the person in real time. Also, All the tutorials I have seen so far are using the same styles and HTML for all messages and I can't figure out how to separate the styles for a sent message and a received message. I just haven't found a tutorial that is using that concept and that's exactly what i'm looking for
Level 27
I would suggest that you google: opensource chat
The can download the source code and modify the css.
Please or to participate in this conversation.