{"id":35268,"date":"2023-05-01T12:16:15","date_gmt":"2023-05-01T12:16:15","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=35268"},"modified":"2024-11-21T07:04:19","modified_gmt":"2024-11-21T07:04:19","slug":"laravel-pusher","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/laravel-pusher","title":{"rendered":"Real-time Chat App using Laravel Pusher and Jquery"},"content":{"rendered":"<p style=\"color:#FFA500\"><strong><i>Quick Summary:<\/i><\/strong><\/p>\n<p><i><strong>Pusher is a cloud-based platform enabling developers to quickly create real-time web and mobile applications. Laravel Pusher is widely used for its simplicity and ease of use. In this blog, we&#8217;ll take a closer look at what is Pusher in Laravel, its features, and a tutorial on how to build real-time chat app using Pusher Laravel and Jquery.<\/strong><\/i><\/p>\n<h2>Introduction to Laravel Pusher<\/h2>\n<p>Pusher is a hosted service that enables to use real-time data in web and mobile applications. Laravel Pusher has many features that make it a popular choice for building real-time applications. Here are some of the key features of Pusher:<\/p>\n<ul class=\"bullets text-left\">\n<li><strong>Real-time messaging:<\/strong> Pusher enables real-time messaging between clients and servers, allowing developers to build real-time applications that update in real-time.<\/li>\n<li><strong>Channels:<\/strong> Pusher uses channels to manage data communication between clients and servers. Channels are used to group data by type, making it easier for developers to manage their data.<\/li>\n<li><strong>Webhooks:<\/strong> Pusher provides webhooks that receive real-time notifications when certain events occur. This can be useful for triggering actions in your real-time chat application.<\/li>\n<li><strong>Authentication:<\/strong> Pusher provides authentication mechanisms that enable developers to secure their real-time applications.<\/li>\n<li><strong>Presence:<\/strong> Pusher&#8217;s presence channels provide developers with a way to track the status of users in real-time applications. Presence channels help build features such as user presence, user lists, and online\/offline status.<\/li>\n<\/ul>\n<h3>Types of Laravel Pusher Channels<\/h3>\n<p>Pusher provides four types of channels for developers to use in their real-time applications:<\/p>\n<ul class=\"bullets text-left\">\n<li><strong>Public Channels:<\/strong> These channels are open to everyone; any user can subscribe to them without any authentication. Public channels are suitable for broadcasting events that everyone can see.<\/li>\n<li><strong>Private Channels: <\/strong>These channels are only accessible to authenticated users. You can use private channels to send sensitive information only specific users should see.<\/li>\n<li><strong>Presence Channels: <\/strong>These channels are similar to private channels but also provide information about who is currently subscribed to the channel. Presence channels are useful for building real-time chat applications, online collaboration tools, and multiplayer games.<\/li>\n<li><strong>Encrypted Channels: <\/strong>These channels provide end-to-end encryption for messages sent between clients and servers. Encrypted channels are useful for applications that deal with sensitive data or require high security.<\/ul>\n<p>Developers can choose the appropriate type of channel based on their application&#8217;s use case and security requirements. Pusher&#8217;s channel types offer a range of options to suit various needs and enable developers to build real-time applications quickly and easily.<\/p>\n<h2>How to Create Pusher Account<\/h2>\n<ul class= \"text-left\">\n<li><strong>1.<\/strong> Go to the Pusher website at <a href=\"https:\/\/pusher.com\/\" target=\"_blank\" rel=\"noopener\">Pusher<\/a>.<\/li>\n<li><strong>2.<\/strong> Click on the &#8220;Sign up&#8221; button in the top right corner of the page.<\/li>\n<li><strong>3.<\/strong> Fill out the registration form with your name, email address, and password.<\/li>\n<li><strong>4.<\/strong> Click on the &#8220;Create account&#8221; button.<\/li>\n<li><strong>5.<\/strong> You will receive a confirmation email from Pusher. Click on the link in the email to verify your email address and activate your account.<\/li>\n<li><strong>6.<\/strong> Once your account is activated, you can log in to the Pusher  dashboard and start using Pusher&#8217;s real-time communication infrastructure to build your applications.<\/li>\n<\/ul>\n<h2>How to Create an App in Pusher Laravel<\/h2>\n<ul class=\"bullets text-left\">\n<li><strong>1. <\/strong>Log in to your Pusher account and go to the dashboard.<\/li>\n<li><strong>2. <\/strong>Click on the &#8220;Create new app&#8221; button.<\/li>\n<li><strong>3. <\/strong>Fill out the form with your app&#8217;s name, description, and the technology you&#8217;ll be using (e.g., JavaScript, React, iOS, etc.).<\/li>\n<li><strong>4. <\/strong>Select the cluster you want to use for your app (Pusher provides different clusters located in different regions to optimize performance for your users).<\/li>\n<li><strong>5. <\/strong>Click on the &#8220;Create app&#8221; button to create your app.<\/li>\n<\/ul>\n<p>Once you have created your app, Pusher will provide you with an App ID, API Key, and API Secret. You will need these credentials to use chat Pusher APIs and libraries in your application. You can find these credentials in the app dashboard under the &#8220;App Keys&#8221; tab.<\/p>\n<p>After creating your app, you can configure the settings and features you want to use in your application. For example, you can create channels, configure webhooks, set up authentication, and more. Pusher&#8217;s documentation provides detailed guides and examples on how to use Pusher&#8217;s features in your application.<\/p>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\"><strong><i><span style=\"font-size:22px; color:#000;\">Looking to create a dynamic Real-time Chat App using Laravel Pusher and Jquery?<\/span><br \/>\nGet ready to have a top-of-the-line chat application that&#8217;s both seamless and user-friendly. Take action now and hire <a href=\"https:\/\/www.bacancytechnology.com\/hire-laravel-developer\" target=\"_blank\" rel=\"noopener\">Laravel developer<\/a> to get started on Real-time Chat App today!<\/i><\/strong><\/p>\n<h2>Example Of Chat App with Laravel Pusher and JQuery<\/h2>\n<p>In this <i>Laravel Pusher<\/i> tutorial, we will see how to create a real-time chat application using Pusher in Laravel. <\/p>\n<h3>Step 1: Install Package<\/h3>\n<pre>composer require pusher\/pusher-php-server<\/pre>\n<p><strong>Configure app credentials to your .env file<\/strong><\/p>\n<pre>PUSHER_APP_ID=<app_id>\r\nPUSHER_APP_KEY=<app_key>\r\nPUSHER_APP_SECRET=<app_secret>\r\nPUSHER_APP_CLUSTER=<app_cluster>\r\nDon't forget to clear cache : php artisan config:clear<\/pre>\n<h3>Step 2: Create Route<\/h3>\n<pre>Route::post('pusher\/send-message', 'pusherController@sendMessage')->name('pusher.sendmessage');<\/pre>\n<h3>Step 3: Send a message using Laravel Pusher and Jquery<\/h3>\n<p><strong>Jquery:<\/strong><\/p>\n<pre>var message = 'Hello, This is my first real time message';\r\n$.ajax({\r\n    type: 'POST',\r\n    cache: false,\r\n    dataType: 'json',\r\n    url: '{{route(\"pusher.sendmessage\")}}',\r\n    contentType: false,\r\n    processData: false,\r\n    data: {message : message},\r\n    headers: {\r\n        'X-CSRF-TOKEN': $('meta[name=\"csrf-token\"]').attr('content')\r\n    },\r\n    success: function (result) {\r\n        if(result.response_code == 1){\r\n            alert(\"Message has been sent\");\r\n        }else{\r\n            alert(\"Fail to send message\");\r\n        }\r\n    },\r\n    error: function(){\r\n        alert(\"Something went wrong please try again later\");\r\n    }\r\n});<\/pre>\n<p><strong>Laravel:<\/strong><\/p>\n<pre>use Pusher\\Pusher;\r\nuse Validator;\r\nclass pusherController extends Controller{\r\n    public function sendMessage(Request $request) {        \r\n        $return_data['response_code'] = 0;\r\n        $return_data['message'] = 'Something went wrong, Please try again later.';\r\n\r\n        $rules = ['message' => 'required'];\r\n        $messages = ['message.required' => 'Please enter message to communicate.'];\r\n        $validator = Validator::make($request->all(), $rules, $messages);\r\n        if ($validator->fails()) {\r\n            $message = implode(\"<br\/>\", $validator->messages()->all());\r\n            $return_data['message'] = $message;\r\n            return $return_data;\r\n        }\r\n\r\n        try {\r\n            $options = [\r\n                'cluster' => env('PUSHER_APP_CLUSTER'),\r\n                'useTLS' => true\r\n            ];\r\n\r\n            $pusher = new Pusher(\r\n                env('PUSHER_APP_KEY'),\r\n                env('PUSHER_APP_SECRET'),\r\n                env('PUSHER_APP_ID'),\r\n                $options\r\n            );\r\n\r\n            $response = $pusher->trigger('my-chat-channel', 'my-new-message-event', ['message' => $request->message]);\r\n            if($response){\r\n                $return_data['response_code'] = 1;\r\n                $return_data['message'] = 'Success.';\r\n            }\r\n        } catch (\\Exception $e) {\r\n            $return_data['message'] = $e->getMessage();\r\n        }\r\n        return $return_data;\r\n    }\r\n}<\/pre>\n<h3>Step 4: Subscribe to channel and listen to an event<\/h3>\n<div id=\"attachment_35274\" style=\"width: 1310px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-35274\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2023\/05\/listen-to-an-event-Laravel-Pusher.png\" alt=\"Laravel Pusher listen to an event\" width=\"1300\" height=\"830\" class=\"size-full wp-image-35274\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2023\/05\/listen-to-an-event-Laravel-Pusher.png 1300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2023\/05\/listen-to-an-event-Laravel-Pusher-300x192.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2023\/05\/listen-to-an-event-Laravel-Pusher-1024x654.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2023\/05\/listen-to-an-event-Laravel-Pusher-768x490.png 768w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><p id=\"caption-attachment-35274\" class=\"wp-caption-text\">Laravel Pusher listen to an event<\/p><\/div>\n<h2>Conclusion<\/h2>\n<p>Pusher is a powerful platform that enables developers to build real-time web and mobile applications quickly and easily. Its range of features and intuitive chat Pusher API make it a popular choice for developers looking to build real-time applications. Whether you&#8217;re building a real-time chat application, a collaborative tool, or a multiplayer game, Laravel Pusher provides the infrastructure and tools you need to make it happen. Leverage Our <a href=\"https:\/\/www.bacancytechnology.com\/laravel-development\" target=\"_blank\" rel=\"noopener\">Laravel development services<\/a> can help you integrate Pusher and build interactive, collaborative, and high-performance applications. Contact us today to know more.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quick Summary: Pusher is a cloud-based platform enabling developers to quickly create real-time web and mobile applications. Laravel Pusher is widely used for its simplicity and ease of use. In this blog, we&#8217;ll take a closer look at what is Pusher in Laravel, its features, and a tutorial on how to build real-time chat app [&hellip;]<\/p>\n","protected":false},"author":34,"featured_media":35275,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[1142],"tags":[],"coauthors":[1568,2149],"class_list":["post-35268","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel"],"acf":[],"modified_by":"Chandresh Patel","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/35268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=35268"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/35268\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/35275"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=35268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=35268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=35268"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=35268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}