PHP WebSocket

server/2024/10/19 21:40:11/

文章目录

  • PHP WebSocket 介绍
  • Laravel 8 中使用 WebSocket实现广播
    • 1. 安装 Laravel WebSockets
    • 2. 配置 WebSocket
    • 3.运行 WebSocket 服务器
    • 4. 客户端代码
    • 5. 在 Laravel 中广播事件
    • 6. 触发事件
    • 7. 监听事件
  • 创建单聊
    • 1.创建一个用于发送单聊消息的事件
    • 2.设置消息发送
    • 3.设置路由
    • 4.客户端 JavaScript 代码
  • 总结


PHP WebSocket 介绍

WebSocket 是一种网络通信协议,允许在客户端和服务器之间建立持久的全双工连接。这种连接使得服务器能够主动向客户端推送数据,而不仅仅是响应请求。WebSocket 特别适合需要实时数据交互的应用,如聊天应用、在线游戏和实时通知


Laravel 8 中使用 WebSocket实现广播

Laravel 中,可以使用多个库来实现 WebSocket,最常用的是 RatchetBeyond CodeLaravel WebSockets

1. 安装 Laravel WebSockets

使用 beyondcode/laravel-websockets 包

php">composer require beyondcode/laravel-websockets

2. 配置 WebSocket

安装完包后,需要发布配置文件

php">php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider"

这个操作会创建 config/websockets.php 文件,您可以在其中配置 WebSocket 服务器的设置

3.运行 WebSocket 服务器

可以通过 Artisan 命令启动 WebSocket 服务器

php">php artisan websockets:serve

启动 WebSocket 服务器并在默认端口(6001)上监听

4. 客户端代码

使用 JavaScript 来连接到 WebSocket 服务器

php">// resources/js/app.jsconst socket = new WebSocket('ws://localhost:6001');socket.onopen = function() {console.log('WebSocket connection established.');
};socket.onmessage = function(event) {console.log('Message from server: ', event.data);
};socket.onclose = function() {console.log('WebSocket connection closed.');
};// 发送消息到服务器
socket.send('Hello, server!');

5. 在 Laravel 中广播事件

在事件中使用 ShouldBroadcast 接口

php">// app/Events/MessageSent.phpnamespace App\Events;use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;class MessageSent implements ShouldBroadcast
{use Dispatchable, InteractsWithSockets, SerializesModels;public $user;public $message;public function __construct($user, $message){$this->user = $user;$this->message = $message;}public function broadcastOn(){return new Channel('chat');}
}

6. 触发事件

在控制器或其他需要的地方触发事件,以控制器为例

php">// app/Http/Controllers/ChatController.phpnamespace App\Http\Controllers;use App\Events\MessageSent;
use Illuminate\Http\Request;class ChatController extends Controller
{public function sendMessage(Request $request){$user = $request->user(); // 获取当前用户$message = $request->input('message');// 触发广播事件broadcast(new MessageSent($user, $message))->toOthers();return response()->json(['status' => 'Message sent!']);}
}

7. 监听事件

在客户端,可以使用 Laravel Echo 来监听事件

php">// 在 app.js 中import Echo from 'laravel-echo';
import Pusher from 'pusher-js';window.Pusher = Pusher;window.Echo = new Echo({broadcaster: 'pusher',key: 'your-pusher-key',cluster: 'your-pusher-cluster',forceTLS: true,
});Echo.channel('chat').listen('MessageSent', (e) => {console.log(e.user.name + ': ' + e.message);});

确保在视图中引入这个 JavaScript 文件

php"><script src="{{ mix('js/app.js') }}"></script>

创建单聊

1.创建一个用于发送单聊消息的事件

php">// app/Events/PrivateMessageSent.phpnamespace App\Events;use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;class PrivateMessageSent implements ShouldBroadcast
{use Dispatchable, InteractsWithSockets, SerializesModels;public $sender;public $receiver;public $message;public function __construct($sender, $receiver, $message){$this->sender = $sender;$this->receiver = $receiver;$this->message = $message;}public function broadcastOn(){// 使用私密频道,格式为 private-{userId}return new PrivateChannel('private-chat.' . $this->receiver->id);}
}

2.设置消息发送

创建一个控制器来处理消息的发送

php">// app/Http/Controllers/ChatController.phpnamespace App\Http\Controllers;use App\Events\PrivateMessageSent;
use Illuminate\Http\Request;class ChatController extends Controller
{public function sendMessage(Request $request){// 验证请求数据$request->validate(['receiver_id' => 'required|exists:users,id','message' => 'required|string',]);$sender = $request->user(); // 获取当前用户$receiver = User::find($request->receiver_id); // 获取接收者用户// 触发广播事件broadcast(new PrivateMessageSent($sender, $receiver, $request->message))->toOthers();return response()->json(['status' => 'Message sent!']);}
}

3.设置路由

routes/web.php 中添加路由

php">use App\Http\Controllers\ChatController;Route::post('/send-private-message', [ChatController::class, 'sendMessage']);

4.客户端 JavaScript 代码

这里还是使用Laravel Echo 连接到 WebSocket 服务器并处理消息发送和接收

php">// resources/js/app.jsimport Echo from 'laravel-echo';
import Pusher from 'pusher-js';window.Pusher = Pusher;window.Echo = new Echo({broadcaster: 'pusher',key: 'your-pusher-key',cluster: 'your-pusher-cluster',forceTLS: true,
});// 连接到用户的私密频道
function connectToPrivateChannel(userId) {window.Echo.private('private-chat.' + userId).listen('PrivateMessageSent', (e) => {console.log(`${e.sender.name}: ${e.message}`);// 这里可以更新 DOM 以显示消息});
}// 发送消息函数
function sendMessage(receiverId) {const message = document.getElementById('message').value;fetch('/send-private-message', {method: 'POST',headers: {'Content-Type': 'application/json','X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),},body: JSON.stringify({ receiver_id: receiverId, message }),}).then(response => response.json()).then(data => {console.log(data.status);}).catch(error => console.error('Error:', error));
}// 在 HTML 中调用 connectToPrivateChannel 和 sendMessage 方法

html代码

php"><!-- resources/views/chat.blade.php --><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="csrf-token" content="{{ csrf_token() }}"><title>Private Chat</title><script src="{{ mix('js/app.js') }}"></script>
</head>
<body><div><h1>Private Chat Room</h1><div id="chat-box"><!-- 这里将显示聊天记录 --></div><input type="text" id="message" placeholder="Type a message..."><select id="receiver-id"><!-- 动态加载用户列表 -->@foreach($users as $user)<option value="{{ $user->id }}">{{ $user->name }}</option>@endforeach</select><button onclick="sendMessage(document.getElementById('receiver-id').value)">Send</button></div>
</body>
</html>

总结

通过以上步骤我们可以在 Laravel 8 中实现聊天功能,实现用户之间进行通信,允许用户实时发送和接收消息,并通过 WebSocket 实时更新聊天记录,还可以根据需求扩展功能,例如添加消息存储、用户状态、聊天记录等


http://www.ppmy.cn/server/133154.html

相关文章

复习:JavaScript 中的symbol

在 JavaScript 中&#xff0c;Symbol 是一种新的原始数据类型&#xff0c;它表示唯一的、不可变的值。Symbol 类型的值可以作为对象的唯一属性键&#xff0c;这是它与其他数据类型&#xff08;如字符串和数字&#xff09;相比的独特之处。使用 Symbol 可以避免属性名的冲突&…

linux通过configfs方式开启uvc、uac、adb等功能

linux通过configfs方式开启uvc、uac、adb等功能 IamGroot2023 已于 2023-03-22 13:02:02 修改 阅读量3.1k 收藏 20 点赞数 3 文章标签&#xff1a; adb linux android Powered by 金山文档 版权 setusbconfig uvc&#xff1a;开启uvc功能。 切换到usb device模式&#xff1a; …

架构师知识梳理(十):系统架构设计与评估

架构基本概念 软件架构&#xff1a;从需求分析到软件设计之间的过渡过程称为软件架构&#xff0c;软件架构为软件系统提供了一个结构、行为和属性的高级抽象&#xff0c;由构件的描述、构件的相互作用&#xff08;连接件&#xff09;、指导构件集成的模式以及这些模式的约束组成…

Uncaught (in promise) TypeError: Cannot convert object to primitive value

使用vue3的时候报了这个错误&#xff0c;而且还同时报了一个警告 说一下我这里这个错误和警告的原因&#xff0c;是因为我把传给 第三方组件的值 也当做了 第三方组件的 ref&#xff0c;可能没太说清楚&#xff0c;所以接下来看代码&#xff0c;我这里使用的第三方组件是 vxe-t…

K8s简介和安装部署

一、 Kubernetes 简介及部署方法 1、应用部署方式演变 Kubernetes简称为K8s&#xff0c;是用于自动部署、扩缩和管理容器化应用程序的开源系统&#xff0c;起源于Google 集群管理工具Borg。 传统部署 &#xff1a;互联网早期&#xff0c;会直接将应用程序部署在物理机上 优…

C++初阶——入门

目录 1、C发展历史 2、C版本更新 3、C参考文档 4、C书籍推荐 5、C的程序 6、命名空间 6.1 namespace的作用 6.2 namespace的定义 6.3 namespace的使用 7、C输入&输出 8、缺省参数 9、函数重载 10、引用 10.1 引用的概念和定义 10.2 引用的特性 10.3 引用的使…

测试自动化成功关键因素!

在软件测试领域&#xff0c;自动化测试被广泛认为是提高效率和准确性的关键工具。然而&#xff0c;尽管自动化测试具有巨大潜力&#xff0c;但实现其最大效益并非易事。本文将探讨测试自动化中的一些常见挑战&#xff0c;并提供策略以确保项目的成功。 自动化测试的局限性 尽管…

港大和字节提出长视频生成模型Loong,可生成具有一致外观、大运动动态和自然场景过渡的分钟级长视频。

HKU, ByteDance&#xff5c;⭐️ 港大和字节联合提出长视频生成模型Loong&#xff0c;该模型可以生成外观一致、运动动态大、场景过渡自然的分钟级长视频。选择以统一的顺序对文本标记和视频标记进行建模&#xff0c;并使用渐进式短到长训练方案和损失重新加权来克服长视频训练…