Real-time chat room: realized by event broadcasting based on Laravel+Pusher+Vue.

<p>I said before that I would sort out a tutorial on event broadcasting, but I finally had time to write this article today. This tutorial is based on Laravel+Pusher+Vue, with event broadcasting as the core technology, so that you can quickly build a real-time chat room application. Not much to say, let&#39;s take a look at the specific content directly. Application initialization</p><p>Installation configuration</p><p>First, install a brand-new chat room application through Composer:</p><p>composer create-project laravel/laravel chatroom --prefer-dist</p><p>Because of the event broadcast, you need to cancel the comments in front of the broadcast service provider in config/app.php:</p><p><img src="https://freeonlinedomain.com/uploads/allimg/Server/20240128/gnxtkstlxop26940.jpg"/></p><p>Modify the BROADCAST_DRIVER configuration item in. env to pusher:</p><p>BROADCAST_DRIVER=pusher</p><p>Although Laravel supports Pusher out of the box, we still need to install the corresponding PHP SDK:</p><p>composer require pusher/pusher-php-server</p><p>Set the Pusher voucher information</p><p>Visit Pusher official website, register and log in to the user background, and create a new Channels App:</p><p><img src="https://freeonlinedomain.com/uploads/allimg/Server/20240128/tyljeszlgiw26941.jpg"/></p><p>After the creation is completed, you can get the relevant information of App Keys in the jump page:</p><p><img src="https://freeonlinedomain.com/uploads/allimg/Server/20240128/4l3ie0xcixg26942.jpg"/></p><p>Fill the corresponding field into the corresponding configuration item. env in the root directory of the chat room application.</p><p>Front-end resource initialization</p><p>We use Laravel Mix to compile front-end CSS and JavaScript:</p><p>npm install</p><p>In addition, Laravel also provides a JavaScript library Laravel Echo to subscribe and listen to events:</p><p>npm install --save laravel-echo pusher-js</p><p>After the installation is completed, we should also tell Laravel Echo to use Pusher. Laravel has provided us with this implementation in resources/assets/js/bootstrap.js, but it is commented by default, so just cancel this comment:</p><p>import Echo from &#39;laravel-echo&#39; window.Pusher = require(&#39;pusher-js&#39;); window.Echo = new Echo({ broadcaster: &#39;pusher&#39;, key: process.env.MIX_PUSHER_APP_KEY, cluster: process.env.MIX_PUSHER_APP_CLUSTER, encrypted: true });</p><p>User-certified scaffold code</p><p>We set that only logged-in users can enter the chat room to chat. In order to simplify the process, we use Laravel&#39;s default user authentication function:</p><p>php artisan make:auth</p><p>The above commands will generate the necessary routing, view, controller and other codes for the user authentication system. Before the function takes effect, you need to run the database migration command to generate the corresponding data table, edit the database-related configuration items in. env to ensure that you can connect to the database correctly, and then run the following command:</p><p>php artisan migrate</p><p>At this point, the preparation for application initialization has been completed, and the business code is now written.</p><p>Business code implementation</p><p>Message model</p><p>First, create a model class and its corresponding database migration file for the sent message:</p><p>php artisan make:model Message -m</p><p>Add the following line of code to the newly generated app/messagemodel class to facilitate batch assignment:</p><p>/** * Fields that are mass assignable * * @var array */ protected $fillable = [&#39;message&#39;];</p><p>Then write the up method of the migration file corresponding to the newly generated messages in the databases/migrations directory:</p><p>Schema::create(&#39;messages&#39;, function (Blueprint $table) { $table-&gt;increments(&#39;id&#39;); $table-&gt;integer(&#39;user_id&#39;)-&gt;unsigned(); $table-&gt;text(&#39;message&#39;); $table-&gt;timestamps(); });</p><p>Finally, execute the migration command to generate data table messages:</p><p>php artisan migrate</p><p>Relationship between users and messages</p><p>Obviously, there is a one-to-many relationship between Users and messages. Add an association method in the user model class:</p><p>/** * A user can have many messages * * @return IlluminateDatabaseEloquentRelationsHasMany */ public function messages() { return $this-&gt;hasMany(Message::class); }</p><p>Next, define the relative relationship in the Message model class:</p><p>/** * A message belong to a user * * @return IlluminateDatabaseEloquentRelationsBelongsTo */ public function user() { return $this-&gt;belongsTo(User::class); }</p><p>Controller code</p><p>Create controller ChatsController to realize specific business logic;</p><p>php artisan make:controller ChatsController</p><p>Write the newly generated controller class app/http/controllers/chatscontroller code as follows:</p>