PHP WebSocket

ops/2024/10/19 23:31:47/

文章目录

  • 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/ops/126830.html

相关文章

RHCE---第二章:时间服务器

文章目录 第二章&#xff1a;时间服务器简介重要性Linux的两个时钟date命令设置date参数date的格式 设置日期时间timedatectl命令设置 **NTP**Chrony介绍 安装与配置安装&#xff1a;Chrony配置文件分析同步时间服务器常用的授时中心扩展配置命令协议及全称 实验实验1实验2chro…

java.io.StreamCorruptedException: invalid stream header的原因及解决方法

最近在写一个类似于QQ的网络通讯项目&#xff0c;在信息发送的时候出现了一个问题&#xff0c;客户端的信息服务端可以正常收到并且转出&#xff0c;但是对应的客户端在接收的时候就会抛出这个异常&#xff0c;往往还会伴随着java.io.StreamCorruptedException: invalid type c…

逆向工程入门02.if语句分析

先贴一下代码 #include<stdio.h> #include<stdlib.h> int main() { int nFlag 0; scanf("%d", nFlag); if (nFlag10) { printf("Flag%d", nFlag); } system("pause"); return 0; } 我拿X86下的Debug进行动态和静态分…

整理一下实际开发和工作中Git工具的使用 (持续更新中)

介绍一下Git 在实际开发和工作中&#xff0c;Git工具的使用可以说是至关重要的&#xff0c;它不仅提高了团队协作的效率&#xff0c;还帮助开发者有效地管理代码版本。以下是对Git工具使用的扩展描述&#xff1a; 版本控制&#xff1a;Git能够跟踪代码的每一个修改记录&#x…

Android常用界面控件——ProgressBar

ProgressBar 目录 ProgressBar 在XML中定义ProgressBar ProgressBar风格样式 ProgressBar常用XML属性 在Java代码中控制ProgressBar 实例 什么是ProgressBar&#xff1f; ProgressBar是Android中的一个视图控件&#xff0c;主要用于表示一个任务的进度情况&#xff0c;…

【java】Springboot框架增加日志功能,使用log4j和Logback实现日志功能

【java】Springboot框架增加日志功能,使用log4j和Logback实现日志功能 参考文章1:深入了解Java日志框架:SLF4J和Logback 参考文章2:日志框架简介-Slf4j+Logback入门实践 我的系统是 Springboot+Maven 简述 Logback是log4j框架的升级版,是一个可靠且高效的日志框架,内置在…

外包干了3周,技术退步太明显了。。。。。

先说一下自己的情况&#xff0c;大专生&#xff0c;21年通过校招进入武汉某软件公司&#xff0c;干了差不多3个星期的功能测试&#xff0c;那年国庆&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我才在一个外包企业干了3周的功…

关于 GLFW、SDL2、Win32、GLUT 和 macOS(OSX)平台的介绍

GLFW 介绍&#xff1a; GLFW 是一个轻量级的、开源的库&#xff0c;用于在多种操作系统上创建和管理 OpenGL、OpenGL ES 和 Vulkan 窗口。它提供了创建窗口、上下文、接收输入和事件处理的基本功能。 应用&#xff1a; 游戏开发&#xff1a;GLFW 常用于开发游戏&#xff0c;…