Swoole WebSocket 的应用

第 78 篇文章

这是关于 Swoole 学习的第三篇文章： Swoole WebSocket 的应用 。

• 第一篇：Swoole Task 的应用

• 第二篇：Swoole Timer 的应用

概述

什么是 WebSocket ？

WebSocket 是一种在单个TCP连接上进行全双工通信的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

我们利用 WebSocket 进行及时通讯，今天实现一个 视频弹幕效果 。

实现弹幕其实就和群聊类似，将消息推送给所有的客户端，只不过前端的展示所有不同。

本地版本：

• 后端 PHP 7.2.6、Swoole 4.3.1。

• 前端 HTML5 WebSocket、Canvas。

废话不多说，先看效果。

批量版（批量模拟）：

手动版（手动发送）：

代码

server.php

index.php

小结

一、单聊提供了方法，群聊提供方法了吗？

官方没有提供群聊的方法，使用循环实现的。

单聊：

群聊：

二、发送消息为什么要放到 Task 中，封装一个普通方法不行吗？

不能封装成一个普通的方法，要放在 Task 中使用多进程执行。

如果想了解 Swoole Task 的知识，请看： 第二篇：Swoole Task 的应用 。

三、如何模拟批量弹幕效果？

可以使用 swoole_ timer_ tick ，比如：

四、前端使用的哪个弹幕插件？还有没有其他的？

canvasBarrage.js：

http://www.zhangxinxu.com/wordpress/?p=6386

有其他的，比如：

• Jquery.barrager.js

• Jquery.danmu.js

• DanMuer.js

根据自己喜欢风格，进行尝试吧。

五、Demo 中视频全屏后，还显示弹幕吗？

不显示。

当点击如上图中的 “全屏” 时，弹幕就不显示了，因为这时全屏的视频已经脱离了HTML文档，具体能否实现大家可以研究研究（记得考虑 PC、Android、iOS 等兼容性）。

也可以用“伪全屏”进行实现，自定义一个全屏按钮，点击时让当前页面全屏，同时让视频尺寸变大。

六、看了这篇文章，单聊和群聊都会了，能实现一个在线IM吗？

不能。

真正使用的在线IM系统，需求落地时比我们想象到要复杂的多，自己深入研究没问题，想开发一套生产环境用的IM系统，需要慎重，特别是后端用PHP。

如果急需在线IM系统，可以使用市面上专业的IM系统。

七、弹幕有什么应用场景？

比如，办年会或活动开场时大家可以利用弹幕活跃气氛，使用微信扫码登录后进行发送实时弹幕，还可以应用到直播，只要觉得合理都可以使用。

八、Swoole WebSocket 入门还可以实现什么案例？

可以实现聊天室功能、直播功能、扫码登录功能等。

温馨提示

本 Demo 仅仅是简单的实现，如需应用到真实场景中还要多做优化。

需要Demo源码的，关注公众号，回复“ swoole 弹幕 ”即可。