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

This article introduces you to the article on the use of Laravel-echo-server to build an event broadcast platform, has a good reference value, hoping to help the needy friends.

This article records the implementation of the Laravel background broadcast message that was encountered in the previous project to the Vue foreground. Laravel does not have a built-in Socket.io server implementation, however, there is a third-party implementation of the Socket.io driver: laravel-echo-server, equivalent to a middleware; Technical essentials: Laravel + Laravel-echo-server + Vue/laravel-echo

Overall architecture

1. Laravel-echo-server

For more information, see: Https://github.com/tlaverdure ...

The 1.1 laravel-echo-server server is built directly into the Laravel project:

① Global installation laravel-echo-server: npm install laravel-echo-server -g ;
The ② console enters the Laravel project and runs the command:laravel-echo-server init

In the Laravel project, there will be more than one laravel-echo-server.json file, which contains all the configuration information;
③ starting a service by running the laravel-echo-server start command line

1.2 laravel-echo-server Server Standalone deployment

We found that, as long as there was a laravel-echo-server.json file to start the service, it was obvious that the service could be deployed independently of the Laravel project (and felt no need to do so).
Use HTTP to push messages to the laravel-echo-server server in the following format:

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

Test with Postman:

Successful testing and laravel-echo-server successful server Setup

2. Laravel Backstage

Defined BroadcastHttpPush.php as an interface

<?phpnamespace app\helptrait;use guzzlehttp\client;trait broadcasthttppush{public    function push ($data)    {        $BASEURL = env (' Websocket_baseurl ', ' http://localhost:6001/');        $appId = env (' websocket_appid ', ' 3ccfbd93b5e2906a ');        $key = env (' Websocket_key ', ' 6509c546c053d59057a61e46ae9a7898 ');        $HTTPURL = $baseUrl. ' apps/'. $appId. '/events?auth_key= '. $key;              $client = new Client ([            ' base_uri ' = $httpUrl,            ' timeout ' = 2.0,        ]);        $response = $client->post ($httpUrl, [            ' json ' = = $data        ]);        $code = $response->getstatuscode ();    }}

Use:

<?phpnamespace app\controllers;use app\helptrait\broadcasthttppush;class sendmessage{use    BroadcastHttpPush ;        Public Function Index ()    {        $broadcastChannel = array (            "channel" = "Private-message",   //channel name, ' private-' means private '            name ' and ' SayHello ',    //Event name            ' data ' and ' = ' Array (                ' status ' = ' * ',                 ' ' message ' = > "Hello world!"            )        ;        $this->push ($broadcastChannel);    }}

3. Vue Front End

DefinedUserActionNotification.vue

<template>  <p>      </p></template><script>import Echo from ' Laravel-echo ' import Io from ' socket.io-client ' export default {  mounted () {    Window.io = io    window. echo = new Echo ({      broadcaster: ' Socket.io ',      Host: ' http://localhost:6001 ',    })    window. Echo.private (' Message '). Listen ('. SayHello ', (res) = {       if (res.status = = =) {         Console.log (res.message)       } else {         console.log (' Something wrong! ')       }    }}  </script><style lang= "Sass" scoped>

注：Before the event sayHello to add . , or need to take the event of the domain name space;