switchon@lavalamp.biz
australia flag +61(0) 42 420 8911
south africa flag +27(0) 21 036 1165
Application & software development
Get A Quote

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact
switchon@lavalamp.biz
Get A Quote

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact
computer vision
Computer Vision
October 18, 2021
typescript access modifiers
Typescript Access Modifiers, Type Safety And Return Types And Why They Are Important
November 15, 2021

Implementing Laravel Echo And Socket.io With A Laravel API And Ionic Vue App

implementing laravel echo
implementing laravel echo

 

The past two weeks I was struggling to implement sockets for an Ionic Vue app that has a Laravel API. I also struggled finding documentation / tutorials that fit my specific needs. I finally found a solution and thought its the perfect thing to write a blog on to help anyone else struggling with this.

 

How To:

First lets set up the server side:

 

In your Laravel .env file we will need to configure the driver. The driver we will be using is Redis. The config settings you will need is as follows:

BROADCAST_DRIVER=redis
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_PASSWORD=null
REDIS_PORT=6379

Now we will need to install Redis. This is how to install Redis on a Windows machine:

  • Go to this link.
  • Download the .msi file and install it.

 

Next we will need to setup and install Laravel Echo Server

To install run the below in your terminal:

npm install -g laravel-echo-server

Next run the following in order to initialize and setup the server:

laravel-echo-server init

You will be presented with the following questions:

Do you want to run this server in development mode?
Yes    
Which port would you like to serve from?
6001
Which database would you like to use to store presence channel members? 
redis
Enter the host of your Laravel authentication server. 
your-domain.test
Will you be serving on http or https?
http
Do you want to generate a client ID/Key for HTTP API? 
No
Do you want to setup cross domain access to the API?
Yes
Specify the URI that may access the API: 
*
Enter the HTTP methods that are allowed for CORS: 
GET, POST
Enter the HTTP headers that are allowed for CORS:
Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id
What do you want this config to be saved as? 
laravel-echo-server.json

 

Next we will need to make a broadcast for the client side to listen to. You can run the below to create a broadcast:

php artisan make:event Example

 

In app/Events locate the new event that has been generated and update  the following:

  • On line 13 add implements ShouldBroadcast
  • On line 34 change PrivateChannel to Channel

To run your Laravel Echo Server run the below in your terminal:

laravel-echo-server start

 

Next to setup the client side:

 

We will need to install Laravel Echo and Socket.io with the following command:

npm install laravel-echo-ionic socket.io-client

 

In your App.vue file add the below into the script tags, so that the ionic app always can connect to your Laravel Echo Server no mater what page the user is on.

import { Echo } from "laravel-echo-ionic";

window.io = require('socket.io-client');

window.Echo = new Echo({
  broadcaster: "socket.io",
  host: "127.0.0.1:6001",
});

window.Echo.connector.socket.on("connect", function () {
  console.log("CONNECTED");
});

window.Echo.connector.socket.on("reconnecting", function () {
  console.log("CONNECTING");
});

window.Echo.connector.socket.on("disconnect", function () {
  console.log("DISCONNECTED");
});

 

To listen to a broadcast we then use the below code on the page you want the app to be listening to a particular channel.

mounted() {
   window.Echo.channel("example");
   window.Echo.connector.socket.on("App\\Events\\Example", (data) => {
      //add code that you want to trigger when this event occurs
   }
},

 

Enjoy Coding!

Contact us


    Related posts:

    laravel envoyer and forgeProvisioning A New Digital Ocean Server With Laravel Forge, And Deploying Code With Laravel Envoyer how to deploy your app/website on herokuHow To Deploy Your App/Website On Heroku how to setup git-ftp for windowsHow To Setup Git-ftp For Windows how to deploy a backend api to azureHow To Deploy A Backend API To Azure
    Share
    0
    Rayne Falkenberg
    Rayne Falkenberg
    Rayne is a web developer with experience in PHP web apps and has an interest in project management and mobile development.

    Leave a Reply Cancel reply

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

    lava lamp lab secondary logo white

    Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment


    lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

    Services

    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI/UX design & consulting
    • Recruitment services
    • Lease an expert

    Contact Us

    south africa+27(0) 83 419 4851

    south africa+27(0) 21 036 1165

    australia+61(0) 42 420 8911


    switchon@lavalamp.biz


    Lava Lamp Lab,
    Unit 1 Monaco Square, 14 Church Street, Durbanville, Cape Town, 7550

    NBConsult Group

    nbconsult
    designer needed
    © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
        Business Automation

        Business-specific workflows assist our clients with Disaster recovery, time tracking and invoice generation, to mention a few. If you choose to outsource your enterprise app development, we work with you to understand your business and assist to deliver automation for great business efficiency.

        eCommerce Solutions

        We are industry experts in Fintech and eCommerce, Lava Lamp Lab will help you with custom software development to provide you with the quality software services for creating online shops, Fintech mobile apps and web presence for your business of any size, allowing you to engage, sell, support and collect payments.

        Startup & Innovation

        Lava Lamp Lab believes in helping you grow your idea into a business. Our team has provided outsourced services to multiple tech start-ups and investors over the last decade, delivering innovative solutions. We have been trusted over other software development companies to build their entire technology stack.

        Data Mining

        Key to any business is the processing of websites and social network APIs, aligning the information gathered to information collected from internal enterprise systems. This big data can be rendered on reporting dashboards to create Business Intelligence. You can entrust Lava Lamp Lab to reliably deliver on this.

        Contact us now

          Application & software development

            Outsourced software development

              Project based resourcing

                Digital marketing & consulting

                  Graphic design & consulting

                    UI/UX design & consulting

                      Lease an expert

                        Recruitment services

                          We are using cookies to give you the best experience on our website.

                          You can find out more about which cookies we are using or switch them off in .

                          Lava Lamp Lab
                          Powered by  GDPR Cookie Compliance
                          Privacy Overview

                          This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                          Strictly Necessary Cookies

                          Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                          If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                          3rd Party Cookies

                          This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                          Keeping this cookie enabled helps us to improve our website.

                          Please enable Strictly Necessary Cookies first so that we can save your preferences!

                          Cookie Policy

                          More information about our Cookie Policy