使用Swoole中的WebSocket快速实现弹幕效果

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

接下来,如果是单纯想学习WebSocket的使用方式的话,可以使用DanmuPlayer项目的源码,是一款Html5弹幕视频播放器插件,也可以执行写一个弹幕插件。我比较懒,直接使用了现成的插件,按照文档配置好后,可以在本地单机使用弹幕效果了。
由于此次是单纯简单入门Swoole,并没有做复杂的代码封装。

1.直接在DanmuPlayer下,demo文件夹中,创建ws_server.php文件,代码如下:

2.打开index.html文件,在对应位置加入调用WebSocket的JS代码,同时,可以不调用数据库写入和获取的代码,代码如下:

3.打开src文件夹下js文件夹中的main.js,找到sendDanmu的函数定义,注释掉原代码中的addDanmu调用,修改为websocket.send()方法,将对应的弹幕Json通过websocket传递,代码如下:

4.接下来,就可以运行WebSocket并记录到log.txt文件了。

[email protected] /w/w/D/demo> nohup php5.6 ws_server.php > log.txt &

以上,便是简要WebSocket实现弹幕的整体代码。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

原文地址:https://www.cnblogs.com/starluke/p/12150577.html

时间: 2024-08-01 19:28:56

使用Swoole中的WebSocket快速实现弹幕效果的相关文章

HTML5中的WebSocket

认识 HTML5 的 WebSocket 在 HTML5 规范中,我最喜欢的Web技术就是正迅速变得流行的 WebSocket API.WebSocket 提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法,从客户端使用简单的语法有效地推动消息到服务器.让我们看一看 HTML5 的 WebSocket API:它可用于客户端.服务器端.而且有一个优秀的第三方API,名为Socket.IO. 一.HTML5 中的 WebSocket API 是个什么东东

带你认识HTML5中的WebSocket

这篇文章主要介绍了带你认识HTML5中的WebSocket,本文讲解了HTML5 中的 WebSocket API 是个什么东东.HTML5 中的 WebSocket API 的用法.带Socket.IO的WebSocket.NodeJS和Socket.IO联合开发等内容,需要的朋友可以参考下 认识 HTML5 的 WebSocket 在 HTML5 规范中,我最喜欢的Web技术就是正迅速变得流行的 WebSocket API.WebSocket 提供了一个受欢迎的技术,以替代我们过去几年一直在

ASP.NET Core 中的 WebSocket 支持(转自MSDN)

本文介绍 ASP.NET Core 中 WebSocket 的入门方法. WebSocket (RFC 6455) 是一个协议,支持通过 TCP 连接建立持久的双向信道. 它用于从快速实时通信中获益的应用,如聊天.仪表板和游戏应用. 如果不明白什么是WebSocket可以参考这篇文章 系统必备 ASP.NET Core 1.1 或更高版本 支持 ASP.NET Core 的任何操作系统: Windows 7/Windows Server 2008 或更高版本 Linux macOS 如果应用在安

在Altium Designer中使用AUTOCAD快速制作元件封装

笔者通过使用AutoCAD处理图形,并将其导入Altium Designer中,快速绘制元件封装,省去算间距的时间. 本例中以NPN管(B772),封装为SOT-89为例: 第一步:使用PDF Editor工具打开B772的说明文档,并定位到封装页面. 将该页面单独导出为pdf格式. 第二步:利用pdf2pxf工具,将导出的含有封装的单页pdf转化为dxf格式. 第三步:使用AutoCAD打开,并标注其中任意一边长,会发现标注和封装上的示数不同.这时使用缩放工具,成功缩放至相同示数. 第四步:删

Eclipse中的快捷键快速生成常用代码(例如无参、带参构造,set、get方法),以及Java中重要的内存分析(栈、堆、方法区、常量池)

Eclipse中的快捷键快速生成常用代码(例如无参.带参构造,set.get方法),以及Java中重要的内存分析(栈.堆.方法区.常量池) 以上就是Eclipse中的快捷键快速生成常用代码(例如无参.带参构造,set.get方法),以及Java中重要的内存分析(栈.堆.方法区.常量池)的全部内容了,更多内容请关注:CPP学习网_CPP大学 本文固定链接:CPP学习网_CPP大学-Eclipse中的快捷键快速生成常用代码(例如无参.带参构造,set.get方法),以及Java中重要的内存分析(栈.

Delphi 7 中,如何快速判断SQL是否能连接上??

Delphi 7 中,如何快速判断SQL是否能连接上?? 谢谢各位!! with DM do begin Conn.Connected := False; Conn.ConnectionString := Connstring; try Conn.Connected := True; except Application.MessageBox('Server connect error!!',cp_Main,MB_OCE); end; end; 你这个只是先断开再重新连接一下,如果SQL服务是没

ThinkPHP中F方法快速缓存实例

一般使用文件方式的缓存就能够满足要求,而thinkPHP还提供了一个专门用于文件方式的快速缓存方法F方法. 由于采用的是PHP返回方式,所以其效率较S方法较高.F方法具有如下特点:1.简单数据缓存:2.文件形式保存:3.采用PHP返回数据方式加载缓存:4.支持子目录缓存以及自动创建:5.支持删除缓存和批量删除:$path="../Public/Runtime/";$str="fastrunaaaaaaaaaaaaaaaa";F("str/ffun"

iOS开发中通知(Notification)快速入门及推送通知实现教程

iOS开发中通知(Notification)快速入门及推送通知实现教程 标签: NSNotificationCenterNSNotification 2016-11-14 00:18 232人阅读 评论(0) 收藏 举报  分类: iOS(400)  转载自:http://www.111cn.NET/sj/ios8/90190.htm 通知(Notification)是开发框架中观察者模式的一种实现方式,内部的实现机制由Cocoa框架支持,通常用于试图控制器和数据模型的交互.通过通知,可以向一个

教你在Win10电脑中给照片快速批量重命名的方法

我们在win10系统电脑的使用中,有时候在一些工作上的小气叫可以帮助我们在工作中做到事半功倍的效果,有小伙伴想要实现在win10中批量给图片重命名的操作方法,今天小编就来把方法分享给大家,一起来看一下教你在Win10电脑中给照片快速批量重命名的方法. 具体的方法和详细的步骤如下: 1.把所有需要重命名的照片放入同一个文件夹中,例如"2016年10月连云港旅游留念",全部选中这些照片,然后在第一张照片上点右键选择"重命名": 2.重命名为"2016年10月连