switchon@lavalamp.biz
+27(0) 83 419 4851 / +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
      • How we work
      • 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
      • How we work
      • 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
      • How we work
      • 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
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    computer vision
    Computer Vision
    Oct 18, 2021
    typescript access modifiers
    Typescript Access Modifiers, Type Safety And Return Types And Why They Are Important
    Nov 15, 2021

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

    Categories
    • Mobile Application Development
    • Software Development
    Tags
    • ionic
    • laravel
    • laravel echo
    • redis
    • server
    • socket.io
    • sockets
    • vue
    • windows
    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 Logan
      Rayne Logan
      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


      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

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165


      switchon@lavalamp.biz


      Unit 4 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      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 settings.

                        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