shahzaibanwar009 / ratchet-websocket-laravel-demo

Real Time One-to-One and Group Chat with PHP Laravel, Ratchet WebSocket Library and JavaScript.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ratchet-websocket-laravel-demo

For Demo read this post https://medium.com/@rohitdhiman_50304/real-time-one-to-one-and-group-chat-with-php-laravel-ratchet-websocket-library-javascript-and-c64ba20621ed

Real Time One-to-One and Group Chat with PHP Laravel, Ratchet WebSocket Library and JavaScript.

In this topic you will be implementing real time chat web socket in PHP using Laravel framework although with little bit changes you will be able to set it up on any PHP framework.
Getting Ratchet
First we need to include Ratchet into our Laravel project using composer by running the following command on your server at the project's root directory
composer require cboden/ratchet
And after it gets installed we can go on with creating websocket server script, which will be running in background waiting for and managing connections.

The WebSocket Controller

Here we'll develop the class that will do the work for the connected parties, it is a standard Laravel controller so that we can use any of the installed packages and services to be provided to the connected peers, in the directory "/app/Http/Controllers" create the file "WebSocketController.php" and copy the following code in it.

That's it the server script is ready to be run and receive connections, but let's review that controller code, mainly the controller implements the Ratchet interfaces that is used on four states that a connected peer gets through and, it includes a variable that has the connected peers saved. the four states that any of the connecting peers go through that are expressed by the callback methods defined in the controller class above.
"onOpen" is the first function called whenever a new client connects to the websocket server, what it does that it saves the connected peer ID that is automatically generated by Ratchet in the "resourceId" property of the connection object, while saving the new connection data a room will be kept for a custom ID that we'll set for the user afterwards.
"onMessage" is the function that is called when a client sends a new message to the websocket, this function is the hub that connects the peers i.e. the clients with one another, it takes the message sent by a peer and we decide how to handle that message, we can send it to all other clients or to specific client depending on the message format we decide on the client side. 
"onError" is the function that is invoked when a client has an error related to its connection with the websocket.
"onClose" is the function that is invoked when a client becomes disconnected with the server as you can see from the code above, all online clients are notified of that disconnected peer.

Running the WebSocket Server

php artisan websocket:init
Or with ssl
php artisan websocketsecure:init

Or Running the WebSocket Server without artisan

php websocketserver.php
Or with ssl
php websocketsecureserver.php

Connecting to the Websocket Server

Put Following JS code in our browser console or in js file or in script tags in your html file.
var conn = new WebSocket('ws://localhost:8090');
conn.onopen = function(e) {
    console.log("Connection established!");
};

Or connecting over https

If you are using self signed certificates then open https://localhost:8091/ on your browser, 
Chrome - Click on ADVANCED button and Proceed to localhost (unsafe).
Firefox - Click on Advanced button then on Add Exception.
var conn = new WebSocket('wss://localhost:8091');
conn.onopen = function(e) {
    console.log("Connection established!");
};
conn.onmessage = function(e) {
    console.log(e.data);
};

Recieving Message

conn.onmessage = function(e) {
    console.log(e.data);
};

Registering Users

conn.send(JSON.stringify({command: "register", userId: 1}));
and
conn.send(JSON.stringify({command: "register", userId: 9}));

Sending Message

User 9 to 1
conn.send(JSON.stringify({command: "message", from:"9", to: "1", message: "Hello"}));
Or from 1 to 9
conn.send(JSON.stringify({command: "message", from:"1", to: "9", message: "Hi"}));

Subscribing to Channel

conn.send(JSON.stringify({command: "subscribe", channel: "global"}));

Sending Message to Channel

conn.send(JSON.stringify({command: "groupchat", message: "hello glob", channel: "global"}));

Closing Connection

conn.close();

About

Real Time One-to-One and Group Chat with PHP Laravel, Ratchet WebSocket Library and JavaScript.

License:GNU General Public License v3.0


Languages

Language:PHP 93.2%Language:Java 3.3%Language:HTML 2.9%Language:Vue 0.6%