实战篇

基于 Laravel + Swoole + Vue 组件实现支持高并发的实时弹幕功能(上)

前面我们已经介绍完了 Swoole 的所有功能特性以及集成到 Laravel 框架的注意事项,接下来学院君带大家来做一些实践小项目练练手,在实践篇里,我们将完成两个项目,一个是简单的弹幕功能,一...

由 学院君 发布于1 year ago    浏览数: 8412    点赞数: 5

基于 Laravel + Swoole + Vue 组件实现支持高并发的实时弹幕功能(下)

我们接着上篇教程来完成弹幕服务端以及客户端与服务端交互的开发,首先来实现服务端 WebSocket 服务器的编码。 WebSocket 服务器 我们参照之前的功能介绍教程《在 Laravel 中...

由 学院君 发布于1 year ago    浏览数: 8423    点赞数: 6

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(一):环境准备篇

项目概述 今天开始,学院君将带领大家基于 Swoole 搞个「大项目」 —— 开发在线聊天室,当然还是在 Laravel 框架中,前端 UI 还是基于 Vue 组件实现,本项目主要涉及以下技术...

由 学院君 发布于11 months ago    浏览数: 9464    点赞数: 15

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(二):后台数据库准备和 API 认证功能实现

上篇教程我们为聊天室项目准备好了开发环境并对项目进行了初始化,今天我们来设置数据库并完成简单的 API 认证功能。 数据库准备 关于数据库这块,我们需要为 Laravel 自带的用户表新增头像字...

由 学院君 发布于11 months ago    浏览数: 5517    点赞数: 6

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(三):后台 WebSocket 服务器实现

今天我们继续聊天室项目后台功能的开发,现在,后端数据库已经就绪,基于 API Token 的用户认证功能已经实现,接下来,我们来实现聊天室功能的核心 —— WebSocket 服务器相关业务逻辑...

由 学院君 发布于11 months ago    浏览数: 7075    点赞数: 5

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(四):前端资源初始化

正如学院君开篇所说,本实战教程的前端界面将会基于 https://github.com/hua1995116/webchat 这个前端技术栈实现的聊天室项目,以便将重心专注于基于 Swoole ...

由 学院君 发布于9 months ago    浏览数: 2387    点赞数: 0

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(五):Homestead 开发环境初始化

前段时间有同学咨询学院君如何在 Homestead 中使用 Swoole,就着这个系列顺便介绍下,同时也作为一个引子,介绍下如何扩展 Homestead 开发环境。 在 Homestead 中...

由 学院君 发布于9 months ago    浏览数: 2116    点赞数: 0

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(六):建立 socket.io 客户端与 Swoole Websocket 服务器的连接

服务端改造方案 完成开发环境、后端 Websocket 服务器的搭建以及前端资源的初始化后,接下来,我们正式开始调试前后端接口完成在线聊天室功能的开发。 首先我们要做的是建立客户端与服务端的...

由 学院君 发布于9 months ago    浏览数: 3805    点赞数: 1

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(七):基于 Muse UI 3.0 的前端用户认证功能实现

引入 Material Design 字体和图标文件 由于我们的聊天室项目前端界面是基于 Muse UI 的,而 Muse UI 基于 Material Design 实现,所以开始之前,需要...

由 学院君 发布于9 months ago    浏览数: 1758    点赞数: 0

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(八):Websocket 服务端重构与用户认证

上篇教程学院君给大家演示了基于 Vue + Muse UI 前端登录到聊天室的实现,不过这一块的实现主要是前端与 Swoole HTTP 服务器的交互,未涉及到 WebSocket 连接,今天我...

由 学院君 发布于9 months ago    浏览数: 2764    点赞数: 1

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(九):实现客服机器人聊天功能

前面我们已经完成了用户认证和 Websocket 服务器的基础组件,接下来,我们正式开始构建聊天室的核心功能,首先,我们来实现机器人聊天功能,机器人聊天后端调用的是第三方机器人接口,所以并不是基...

由 学院君 发布于8 months ago    浏览数: 1841    点赞数: 1

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(十):用户登录后获取未读消息数

接下来,我们正式开始开发聊天室聊天功能。 在用户每次登录后,需要将未读消息发送给客户端,以便提醒用户有多少条未读消息,今天我们就围绕这个功能来编写前后端代码。 前端入口页面逻辑 首先在前端...

由 学院君 发布于7 months ago    浏览数: 1332    点赞数: 0

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(十一):进入聊天室后获取历史聊天记录

在上篇教程中,学院君给大家演示了如何在用户登录后获取未读消息,今天我们进入聊天室房间,看看聊天室里发生的那些事儿。 聊天室页面初始化逻辑 聊天室页面对应的 Vue 组件是 resources...

由 学院君 发布于7 months ago    浏览数: 1385    点赞数: 0

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(十二):加入和退出聊天室房间功能实现

今天我们接着上篇教程,继续介绍用户进入聊天室房间后触发进入房间事件,以及退出房间时触发退出房间事件的 Websocket 服务端实现。 进入房间 我们来看进入房间的实现,在 routes/w...

由 学院君 发布于7 months ago    浏览数: 1196    点赞数: 0

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(十三):发送文本/表情消息

功能概述 发送消息支持多种格式,包括普通文本、表情、图片等,今天我们来介绍最基本的文本和表情消息(Emoji 表情本质上也是文本消息),发送文本消息需要在最下方文本输入框中输入文字,然后点击发...

由 学院君 发布于7 months ago    浏览数: 1297    点赞数: 0

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(十四):发送图片消息

上篇教程我们演示了聊天室中文本/表情消息发布,今天我们来看看图片消息如何发布。 前端交互代码 我们还是从前端组件开始,在聊天室组件 Chat.Vue 中,客户端图片发送核心逻辑位于 file...

由 学院君 发布于7 months ago    浏览数: 1261    点赞数: 0

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(十五):实现用户头像上传功能

头像上传页面入口 之前遗漏了头像上传功能,这里补充一下,头像上传入口位于我的->修改头像里面: 我们只需要在头像上传页面点击上传头像,进行裁剪后,保存头像,即可将其上传并保存到...

由 学院君 发布于7 months ago    浏览数: 1330    点赞数: 0

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(十六):轮询保持长连接优化

这两天 Swoole 生态内部因官方框架之争吵起来,我突然想起来 Swoole 聊天室项目还留了两个小尾巴,一个是长连接轮询的优化,一个是 WebSocket 通信下用户认证的优化,趁着年前把这...

由 学院君 发布于6 months ago    浏览数: 1824    点赞数: 0

基于 Laravel + Swoole + Vue 搭建实时在线聊天室(十七):Websocket 通信用户认证逻辑优化

实现方案 之前我们在 Websocket 通信中,用户认证实现非常粗暴,就是每次从请求字段获取 api_token,然后在服务端判断对应用户记录是否存在: if (!empty($dat...

由 学院君 发布于6 months ago    浏览数: 1820    点赞数: 0

Search Results