Shulou(Shulou.com)06/03 Report--

This article shows you how to actively send messages to the server and achieve online status management through laravel-echo. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

I spent a lot of time on the Internet, and I couldn't find any articles or tutorials on how to actively send messages through laravel-echo and customize the controller in laravel-websockets. Have no choice but to turn over the source code of laravel-echo and laravel-websockets, and get a little harvest. Here, point out a direction for friends in need and step on one less hole.

When using laravel-echo, what should a web page do if it wants to actively send a message to the server? First of all, the simplest is the Ajax asynchronous request, which is easy to write. Another way is through websocket, now that we have established a socket connection, why not use it for two-way communication!

How to use laravel-echo for reverse communication over websocket ("reverse" here refers to sending a message from a web page to the server).

Brief introduction

The default websocket address for a web page connection is http://:/app/. The / app/ section in url is specified in pusher and cannot be modified at this time. Refers to the parameter "key" when instantiating Echo, which is also the PUSHER_APP_KEY environment variable in the .env file. The server-side controller is the controller that laravel-websockets has defined: BeyondCode\ LaravelWebSockets\ WebSockets\ WebSocketHandler. Now we need to implement our own controller for online status management, so we need to change the websocket address and background controller of the default connection to the web page.

Modify the front-end listening address

Open the resources/views/hellow.blade.php view file and add the wsPath variable in the parameters section of the initialization Echo. At this point, the address that websocket listens on becomes http://:/app/.

Window.Echo = new Echo ({broadcaster: 'pusher',key:' joker',// sets the url path in the socket link wsPath:'/ liam/hao',wsHost: location.hostname,wsPort: 2020 forceTLS: false,})

Note: the wsPath variable must start with "/", otherwise an error will be reported.

Tip: here is another small point of knowledge. Pusher will send http://sockjs.pusher.com/pusher requests when connecting to websocket by default. If it looks awkward (I don't like things beyond my control in the website), you can add an enabledTransports variable to the parameter initializing Echo with a value of ['ws',' wss']. This way pusher will replace the http://sockjs.pusher.com/pusher request with your own websocket connection address:

Window.Echo = new Echo ({.. / / after this parameter is added, the request enabledTransports will not be sent to http://sockjs.pusher.com/pusher: ['ws',' wss'],})

Add a new route to the backend

Because the front end changed the listening address. For the corresponding backend, you also need to add a corresponding route. We open the routes/web.php file and add the following new routes:

Route::get ('/ login', function () {return view ('login');}); / / this is a facade method provided by laravel-websockets. The actual object used to register a custom websocekt route / / WebSocketsRouter binding is BeyondCode\ LaravelWebSockets\ Server\ Router. If you are interested, see\ BeyondCode\ LaravelWebSockets\ Facades\ WebSocketsRouter::webSocket (' / liam/hao/app/ {appKey}',\ App\ Http\ Controllers\ MyWebsocketHandler::class); create a custom controller

An App\ Http\ Controllers\ MyWebsocketHandler class is bound to the above route, and now let's implement this class:

> php artisan make:controller MyWebsocketHandlerController created successfully.

After executing the above command, we will find the MyWebsocketHandler.php file in the app/Http/Controllers folder, and let's make some changes:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.