前言
在使用 Laravel 搭建后端和 Vue 搭建前端的项目中，我们通常都需要使用 WebSocket 技术实现实时通信。在实现 WebSocket 的时候，Laravel-echo-server 是一个好的选择。而 laravel-echo-server-srgkas 是一个基于 Laravel-echo-server 的封装，使用起来更加方便。
本文将介绍如何使用 npm 包 laravel-echo-server-srgkas 来实现 WebSocket 通信。
准备工作
在使用 laravel-echo-server-srgkas 前，需要确保已经安装了以下软件：
- Node.js（v6.0.0 或更高版本）
- PHP（v5.6.4 或更高版本）
- Laravel（v5.0 或更高版本）
另外，需要在 Laravel 项目中安装 Laravel-Echo 和 Socket.io。
安装 laravel-echo-server-srgkas
使用 npm 安装 laravel-echo-server-srgkas：
npm install laravel-echo-server-srgkas
安装完成后，在 Laravel 项目的根目录创建一个新的配置文件 .laravel-echo-server-srgkas.json 。
文件的内容如下：
-- -------------------- ---- -------
-
--------------- ---------------------
---------- -
-
-------- ------
------ -----------------------------------
--------- -----------------------------------
---------- ------
------------ ----
-
--
----------- -
------- ------------
------- -----
------- ---------
----------- -------------
----------- ------------
--
---------- -----
------- ------------
------- -------
----------- -------
----------- ---
-------------- ---
------------- ---
------------------- ---
---------------- ---
---------------- --
-在配置中，我们需要填写 App ID、Key、Secret、Cluster，这个信息可以在 Pusher 官网注册后获取。如果你使用的 Pusher 是本地部署的，那么可能需要将 authEndpoint 指定到对应的地址。
配置 Laravel
在 config/broadcasting.php 文件中，使用以下代码替换原有的 pusher 配置：
-- -------------------- ---- -------
-------- -- -
-------- -- ---------
----- -- ----------------------
-------- -- -------------------------
-------- -- ---------------------
--------- -- -
--------- -- --------------------------
-------- -- -----
----------- -- -----
------ -- ---------------------- -------------
------ -- ---------------------- ------
-------- -- ------------------------ -------
--
--在 .env 文件中进行配置：
BROADCAST_DRIVER=pusher PUSHER_APP_ID=666 PUSHER_APP_KEY=5a5e99711c1f1156d9d6bddb91e7fbb6 PUSHER_APP_SECRET=cbb74b8f604dec4e4c9aab9e2d6621a8 PUSHER_APP_CLUSTER=ap1
启动 laravel-echo-server-srgkas
在终端运行以下命令启动 laravel-echo-server-srgkas：
npx laravel-echo-server init npx laravel-echo-server start
这个命令会初始化一些配置信息，如 HTTP 服务等。
注意：在连接到本地部署的 Pusher 服务器的时候，需要在终端输入以下命令：
npx laravel-echo-server client:add --appId=666 --key=5a5e99711c1f1156d9d6bddb91e7fbb6
这个命令会添加客户端信息到配置文件中。
在前端使用 WebSocket
安装前端依赖
使用 npm 安装前端依赖：
npm install --save pusher-js
设置 WebSocket 服务地址
在 resources/js/bootstrap.js 中添加以下代码：
-- -------------------- ---- -------
------ ---- ---- --------------
------------- - ---------------------
----------- - --- ------
------------ ---------
---- -------------------------------
-------- -----------------------------------
---------- -----
------- -------------------------
------- -----
------------- -----
---修改 .env 文件：
MIX_PUSHER_APP_KEY=5a5e99711c1f1156d9d6bddb91e7fbb6 MIX_PUSHER_APP_CLUSTER=ap1
实现 WebSocket 通信
在 Vue 组件中，可以使用以下方法来实现 WebSocket 通信：
this.$echo.private('chat')
.listen('MessageSent', (e) => {
console.log(e);
});其中 private 表示私有频道，chat 是频道名，MessageSent 是事件名。
总结
经过以上步骤，我们就可以使用 npm 包 laravel-echo-server-srgkas 来实现 WebSocket 通信了。这是一个非常方便和高效的方法，在实现实时通信的应用中可以大显身手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ff81e8991b448e0ce2