Socket.IO - Laravel 广播

Socket.IO - Laravel 广播 首页 / Socket.io入门教程 / Socket.IO - Laravel 广播

Laravel提供事件广播主题。事件广播是一个非常有趣的事件,并且特别难以通过redis和socket.io来实现。但是我将逐步为您提供有关如何在laravel 6应用程序中通过rest和socket io发送实时消息的说明。

第1步:安装Laravel 6

首先,因为我们要从头开始,所以我们需要使用命令获取新的Laravel 6版本应用程序。

composer create-project --prefer-dist laravel/laravel blog

步骤2:安装predis

在此步骤中,我们需要将predis安装为以下命令。因此,让我们运行以下命令以在laravel应用中安装predis。

composer require predis/predis

步骤3:创建事件

在这里,我们需要创建广播事件。在事件文件中,我们需要设置通道并使用键发送消息数组。因此,让我们运行以下命令来创建事件。

php artisan make:event SendMessage

app/Events/SendMessage.php

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;

use Illuminate\Queue\SerializesModels;

use Illuminate\Broadcasting\PrivateChannel;

use Illuminate\Broadcasting\PresenceChannel;

use Illuminate\Foundation\Events\Dispatchable;

use Illuminate\Broadcasting\InteractsWithSockets;

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;

class SendMessage implements ShouldBroadcastNow

{

use InteractsWithSockets SerializesModels;

public $data = ['asas'];

/**

* 创建一个新的事件实例。

*

* @return void

*/

public function __construct()

{

}

/**

* 获取事件应该广播的频道。

*

* @return \Illuminate\Broadcasting\Channel|array

*/

public function broadcastOn()

{

return new Channel('user-channel');

}

/**

* 事件的广播名称。

*

* @return string

*/

public function broadcastAs()

{

return 'UserEvent';

}

/**

* 事件的广播名称。

*

* @return string

*/

public function broadcastWith()

{

return ['title'=>'This notification from 无涯教程'];

}

}

步骤4:更新配置文件

在这一步中,我们需要在环境文件和数据库配置文件上添加集合配置。您需要使用BROADCAST_DRIVER将env文件设置为Redis和数据库配置,以及数据库redis配置。

.env

BROADCAST_DRIVER=redis

DB_DATABASE=blog_chat

DB_USERNAME=root

DB_PASSWORD=root

REDIS_HOST=localhost

REDIS_PASSWORD=null

REDIS_PORT=6379

LARAVEL_ECHO_PORT=6001

config/database.php

....

'redis' => [

'client' => env('REDIS_CLIENT' 'predis'),

'options' => [

'cluster' => env('REDIS_CLUSTER' 'redis'),

'prefix' => env('REDIS_PREFIX' ''),

],

'default' => [

'url' => env('REDIS_URL'),

'host' => env('REDIS_HOST' '127.0.0.1'),

'password' => env('REDIS_PASSWORD' null),

'port' => env('REDIS_PORT' 6379),

'database' => env('REDIS_DB' 0),

],

'cache' => [

'url' => env('REDIS_URL'),

'host' => env('REDIS_HOST' '127.0.0.1'),

'password' => env('REDIS_PASSWORD' null),

'port' => env('REDIS_PORT' 6379),

'database' => env('REDIS_CACHE_DB' 1),

],

],

....

现在我们还需要运行迁移命令。

php artisan migrate

步骤5:安装Laravel Echo Server

在此步骤中,我们需要在您的系统和项目中安装laravel-echo-server。因此,让我们运行以下命令来安装laravel-echo-server和init。

安装laravel-echo-server

npm install -g laravel-echo-server

init laravel-echo-server

laravel-echo-server init

您必须设置配置。您可以看到以下屏幕截图:

它将创建新的文件Laravel-echo-server.json文件,内容如下:

laravel-echo-server.json

{

"authHost": "http://localhost"

"authEndpoint": "/broadcasting/auth"

"clients": [],

"database": "redis"

"databaseConfig": {

"redis": {},

"sqlite": {

"databasePath": "/database/laravel-echo-server.sqlite"

}

},

"devMode": true

"host": null

"port": "6001"

"protocol": "http"

"socketio": {},

"secureOptions": 67108864

"sslCertPath": ""

"sslKeyPath": ""

"sslCertChainPath": ""

"sslPassphrase": ""

"subscribers": {

"http": true

"redis": true

},

"apiOriginAllow": {

"allowCors": false

"allowOrigin": ""

"allowMethods": ""

"allowHeaders": ""

}

}

步骤6:安装NPM,Laravel-echo,Socket.io-Client

在这里,我们将安装NPM并安装Laravel-echo,socket.io-client。您还需要配置。所以让我们运行以下命令:

npm install

npm install laravel-echo

npm install socket.io-client

现在我们需要在assets文件上创建新的文件laravel-echo-setup.js文件。

resources/assets/js/laravel-echo-setup.js

import Echo from 'laravel-echo';

window.Echo = new Echo({

broadcaster: 'socket.io'

host: window.location.hostname + ":" + window.laravel_echo_port

});

现在,您需要添加mix文件:

webpack.mix.js

...

mix.js('resources/assets/js/laravel-echo-setup.js' 'public/js');

现在我们需要运行npm运行命令:

npm run dev

步骤7:更新视图文件

现在我们需要更新welcome blade文件。所以你可以看到我们的代码一样:

resources/views/welcome.blade.php

<!doctype html>

<html lang="{{ app()->getLocale() }}">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="csrf-token" content="{{ csrf_token() }}">

<title>Laravel Broadcast Redis Socket io Tutorial - learnfk.com</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

</head>

<body>

<div class="container">

<h1>Laravel Broadcast Redis Socket io Tutorial - learnfk.com</h1>

<div id="notification"></div>

</div>

</body>

<script>

window.laravel_echo_port='{{env("LARAVEL_ECHO_PORT")}}';

</script>

<script src="//{{ Request::getHost() }}:{{env('LARAVEL_ECHO_PORT')}}/socket.io/socket.io.js"></script>

<script src="{{ url('/js/laravel-echo-setup.js') }}" type="text/javascript"></script>

<script type="text/javascript">

var i = 0;

window.Echo.channel('user-channel')

.listen('.UserEvent' (data) => {

i++;

$("#notification").append('<div class="alert alert-success">'+i+'.'+data.title+'</div>');

});

</script>

</html>

步骤8:Call事件

在这里,我们将为Call事件创建新的测试路由。

routes/web.php

Route::get('/t' function () {

event(new \App\Events\SendMessage());

dd('Event Run Successfully.');

});

现在我们可以运行示例了,但是请确保接下来的事情可以运行您的项目。

您必须必须在系统或服务器中安装Redis Server。它不是您可以使用以下命令安装:

sudo apt install redis-server

之后,您可以启动Laravel Echo Server,如下面命令:

laravel-echo-server start

现在您可以使用以下命令运行项目:

php artisan serve

现在,您可以在浏览器中打开以下网址:

http://localhost:8000/

现在,您可以通过以下网址触发事件:

http://localhost:8000/t

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

深入拆解Java虚拟机 -〔郑雨迪〕

Vue开发实战 -〔唐金州〕

研发效率破局之道 -〔葛俊〕

分布式协议与算法实战 -〔韩健〕

Kafka核心源码解读 -〔胡夕〕

WebAssembly入门课 -〔于航〕

讲好故事 -〔涵柏〕

现代React Web开发实战 -〔宋一玮〕

结构执行力 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)