Table of Contents
Overall architecture
1. laravel-echo-server
1.1 laravel-echo-serverThe server is built directly in the laravel project:
1.2 laravel-echo-serverServer independent deployment
2. laravel background
3. vue front-end
Home Backend Development PHP Tutorial How to use laravel-echo-server to build an event broadcast platform

How to use laravel-echo-server to build an event broadcast platform

Jul 27, 2018 am 10:50 AM
laravel vue.js

This article introduces you to the article about using laravel-echo-server to build an event broadcast platform. It has a good reference value and I hope it can help friends in need.

This article records the implementation process of laravel background broadcasting messages to the vue frontend encountered in previous projects. Laravel does not have a built-in Socket.IO server implementation, but there is a third-party implemented Socket.IO driver: laravel-echo-server, which is equivalent to a middleware; technical points: laravel laravel-echo-server vue/laravel- echo

Overall architecture

How to use laravel-echo-server to build an event broadcast platform

1. laravel-echo-server

For detailed introduction, please see: https:/ /github.com/tlaverdure...

1.1 laravel-echo-serverThe server is built directly in the laravel project:

① Install laravel-echo-server globally: npm install laravel-echo-server -g;
② Enter the laravel project in the console and run the command: laravel-echo-server init

How to use laravel-echo-server to build an event broadcast platform
There will be an extra laravel-echo-server.json file in the laravel project, which contains all configuration information;
③ Start the service by running laravel-echo-server start command line

1.2 laravel-echo-serverServer independent deployment

We found that, In fact, as long as there is a laravel-echo-server.json file to start the service, then obviously the service can be deployed independently from the laravel project (you don't have to worry about it if it's not necessary).
Use Http to push messages to the laravel-echo-server server. The format is as follows:

1

POST http://app.dev:6001/apps/your-appId/events?auth_key=you-key'

Copy after login

Test with postman:

How to use laravel-echo-server to build an event broadcast platform

The test was successful, laravel-echo-serverthe server was built successfully

2. laravel background

DefinitionBroadcastHttpPush.phpAs an interface

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<?php namespace App\HelpTrait;

 

use GuzzleHttp\Client;

 

trait BroadcastHttpPush

{

    public function push($data)

    {

        $baseUrl = env(&#39;WEBSOCKET_BASEURL&#39;, &#39;http://localhost:6001/&#39;);

        $appId = env(&#39;WEBSOCKET_APPID&#39;, &#39;3ccfbd93b5e2906a&#39;);

        $key = env(&#39;WEBSOCKET_KEY&#39;, &#39;6509c546c053d59057a61e46ae9a7898&#39;);

        $httpUrl = $baseUrl . &#39;apps/&#39; . $appId . &#39;/events?auth_key=&#39; . $key;

       

        $client = new Client([

            &#39;base_uri&#39; => $httpUrl,

            'timeout' => 2.0,

        ]);

        $response $client->post($httpUrl, [

            'json' => $data

        ]);

        $code $response->getStatusCode();

    }

}

Copy after login

Use:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<?php namespace App\Controllers;

 

use App\HelpTrait\BroadcastHttpPush;

 

class SendMessage

{

    use BroadcastHttpPush;

     

    public function index()

    {

        $broadcastChannel = array(

            "channel" => "private-Message",   // 通道名,`private-`表示私有

            "name" => "sayHello",    // 事件名

            "data" => array(

                "status" => 200, 

                "message" => "hello world!"

            )

        );

        $this->push($broadcastChannel);

    }

}

Copy after login

3. vue front-end

DefinitionUserActionNotification.vue

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<template>

  <p>

     

  </p>

</template>

 

<script>

import Echo from &#39;laravel-echo&#39;

import io from &#39;socket.io-client&#39;

export default {

  mounted() {

    window.io = io

    window.Echo = new Echo({

      broadcaster: &#39;socket.io&#39;,

      host: &#39;http://localhost:6001&#39;,

    })

    window.Echo.private(&#39;Message&#39;).listen(&#39;.sayHello&#39;, (res) => {

       if (res.status === 200) {

         console.log(res.message)

       } else {

         console.log(&#39;something wrong!&#39;)

       }

    })

  }

}

</script>

 

<style></style>

Copy after login

Note : EventsayHello must be preceded by ., otherwise you need to bring the domain name space of the event;

Related recommendations:

How does Laravel operate the database? Three ways of Laravel database operation (code)

How to create a response in Laravel 5.5? Introduction to creating responses (code)

The above is the detailed content of How to use laravel-echo-server to build an event broadcast platform. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Laravel Introduction Example Laravel Introduction Example Apr 18, 2025 pm 12:45 PM

Laravel is a PHP framework for easy building of web applications. It provides a range of powerful features including: Installation: Install the Laravel CLI globally with Composer and create applications in the project directory. Routing: Define the relationship between the URL and the handler in routes/web.php. View: Create a view in resources/views to render the application's interface. Database Integration: Provides out-of-the-box integration with databases such as MySQL and uses migration to create and modify tables. Model and Controller: The model represents the database entity and the controller processes HTTP requests.

Understanding Vue.js: Primarily a Frontend Framework Understanding Vue.js: Primarily a Frontend Framework Apr 17, 2025 am 12:20 AM

Vue.js is a progressive JavaScript framework released by You Yuxi in 2014 to build a user interface. Its core advantages include: 1. Responsive data binding, automatic update view of data changes; 2. Component development, the UI can be split into independent and reusable components.

Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Apr 18, 2025 am 09:24 AM

When developing websites using CraftCMS, you often encounter resource file caching problems, especially when you frequently update CSS and JavaScript files, old versions of files may still be cached by the browser, causing users to not see the latest changes in time. This problem not only affects the user experience, but also increases the difficulty of development and debugging. Recently, I encountered similar troubles in my project, and after some exploration, I found the plugin wiejeben/craft-laravel-mix, which perfectly solved my caching problem.

Laravel user login function Laravel user login function Apr 18, 2025 pm 12:48 PM

Laravel provides a comprehensive Auth framework for implementing user login functions, including: Defining user models (Eloquent model), creating login forms (Blade template engine), writing login controllers (inheriting Auth\LoginController), verifying login requests (Auth::attempt) Redirecting after login is successful (redirect) considering security factors: hash passwords, anti-CSRF protection, rate limiting and security headers. In addition, the Auth framework also provides functions such as resetting passwords, registering and verifying emails. For details, please refer to the Laravel documentation: https://laravel.com/doc

Laravel framework installation method Laravel framework installation method Apr 18, 2025 pm 12:54 PM

Article summary: This article provides detailed step-by-step instructions to guide readers on how to easily install the Laravel framework. Laravel is a powerful PHP framework that speeds up the development process of web applications. This tutorial covers the installation process from system requirements to configuring databases and setting up routing. By following these steps, readers can quickly and efficiently lay a solid foundation for their Laravel project.

Vue.js: Defining Its Role in Web Development Vue.js: Defining Its Role in Web Development Apr 18, 2025 am 12:07 AM

Vue.js' role in web development is to act as a progressive JavaScript framework that simplifies the development process and improves efficiency. 1) It enables developers to focus on business logic through responsive data binding and component development. 2) The working principle of Vue.js relies on responsive systems and virtual DOM to optimize performance. 3) In actual projects, it is common practice to use Vuex to manage global state and optimize data responsiveness.

How to view the version number of laravel? How to view the version number of laravel How to view the version number of laravel? How to view the version number of laravel Apr 18, 2025 pm 01:00 PM

The Laravel framework has built-in methods to easily view its version number to meet the different needs of developers. This article will explore these methods, including using the Composer command line tool, accessing .env files, or obtaining version information through PHP code. These methods are essential for maintaining and managing versioning of Laravel applications.

How to learn Laravel How to learn Laravel for free How to learn Laravel How to learn Laravel for free Apr 18, 2025 pm 12:51 PM

Want to learn the Laravel framework, but suffer from no resources or economic pressure? This article provides you with free learning of Laravel, teaching you how to use resources such as online platforms, documents and community forums to lay a solid foundation for your PHP development journey from getting started to master.

See all articles