使用swoole和websocket结合来制造弹幕

在知乎上无意中看到了一篇有关这个的话题https://zhuanlan.zhihu.com/p/23992890,刚好没事也好久没弄swoole了就自己按照知乎上的那篇文站实操了一下

那个试验中有几个点需要注意一下:

1.首先得安装php的swoole扩展

pecl install swoole 

用php -m检查扩展是否安好

2.jquery包和弹幕所需要的包最好用他那个dist中的文件,不然的话有可能页面js会报错

3. liunx发行版安装php5.3+并且编译swoole扩展,在php.ini中加入extension=swoole.so之后打开命令行,cd到server.php所在目录,修改文件中的监听IP和端口,使用php server.php即开启服务端。 然后客户端html中修改websocket连接的服务端IP和端口,打开页面即可开始体验该实时弹幕系统。



4.index.html中的代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script src="jquery.min.js"></script>

<script src="jquery.danmu.min.js"></script>

<style type="text/css">

#danmu {

width: 40px;

height: 360px;

background-color: gray;

}

#send_box {

position: absolute;

top: 500px;

left: 100px;

}

</style>

</head>

<body>

<script type="text/javascript">

console.log(‘尝试websocket和swoole的配合‘);

var ws = new WebSocket("ws://192.168.131.51:9502");//一定要以ws://开头 ,端口是否可用(试验中可以直接关闭防火墙centos7用 systemctl stop firewalld.service ;7以下的用service iptables stop )

ws.onopen = function () {

console.log("握手成功");

ws.send(‘hello world!!!‘);//向php服务器发送数据

};

ws.onmessage = function (e) {

console.log("message:" + e.data);

var time = $(‘#danmu‘).data("nowtime") + 1;

var text_obj = ‘{ "text":"‘ + e.data + ‘" , "color":"red" ,"size":"1","position":"0","time":"‘ + time + ‘" ,"isnew":" "}‘;   //构造加上了innew属性的字符串danmu对象

console.log(text_obj);

var new_obj = eval(‘(‘ + text_obj + ‘)‘);       //转化为js对象

$(‘#danmu‘).danmu("add_danmu", new_obj);   //向插件中添加该danmu对象

};

ws.onerror = function () {

console.log("error");

};

$(document).ready(function () {

$("#danmu").danmu({

left: 100,    //区域的起始位置x坐标

top: 100,  //区域的起始位置y坐标

height: 360, //区域的高度

width: 640, //区域的宽度

zindex: 100, //div的css样式zindex

speed: 20000, //弹幕速度,飞过区域的毫秒数

sumtime: 50000, //弹幕运行总时间

danmuss: {}, //danmuss对象,运行时的弹幕内容

default_font_color: "#FF0000", //弹幕默认字体颜色

font_size_small: 16, //小号弹幕的字体大小,注意此属性值只能是整数

font_size_big: 24, //大号弹幕的字体大小

opacity: "0.9", //弹幕默认透明度

top_botton_danmu_time: 6000 //顶端底端弹幕持续时间

});

$(‘#danmu‘).danmu(‘danmu_start‘);

});

function send() {

console.log(document.getElementById(‘content‘).value);

ws.send(document.getElementById(‘content‘).value); //将input输入框中的文字发送给后端服务器,让后端服务器广播之

}

</script>

<div id="danmu"></div>

<div id="send_box">

<input id="content" type="text">

<input type="submit" onclick="send()">

</div>

</body>

</html>



5.server.php中的代码如下

<?php

$server = new swoole_websocket_server("0.0.0.0", 9502);//0.0.0.0表示广播消息; 9502是刚才前端页面中定好的通信端口

$server->on(‘open‘, function (swoole_websocket_server $server, $request) {

echo "server: handshake success with fd{$request->fd}\n";//$request->fd 是客户端id

});

$server->on(‘message‘, function (swoole_websocket_server $server, $frame) {

echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}\n";

//$frame->fd 是客户端id,$frame->data是客户端发送的数据

//服务端向客户端发送数据是用 $server->push( ‘客户端id‘ ,  ‘内容‘)

$data = $frame->data;

foreach($server->connections as $fd){

$server->push($fd , $data);//循环广播

}

});

$server->on(‘close‘, function ($ser, $fd) {

echo "client {$fd} closed\n";

});

$server->start();



后端中的输出效果

前端控制台的效果

前端弹幕页面的效果(开多个窗口都会有接受,因为刚才后端设置的是广播的形式啊)

友情链接:

http://wiki.swoole.com/wiki/page/7.html

http://www.swoole.com/

时间: 2024-08-27 09:40:36

使用swoole和websocket结合来制造弹幕的相关文章

用swoole和websocket开发简单聊天室

首先,我想说下写代码的一些习惯,第一,任何可配置的参数或变量都要写到一个config文件中.第二,代码中一定要有日志记录和完善的报错并记录报错.言归正传,swoole应该是每个phper必须要了解的,它号称重新定义了php.此聊天室利用了swoole高并发并且异步非阻塞的特点提高了程序的性能. 首先,定义一个 swoole_lock 和 swoole_websocket_server ,并且配置参数,具体参数详情可以去swoole官网查看. public function start(){ $t

php swoole 和 websocket的初次碰撞

php swoole 扩展仿佛为php开发打开了一扇窗户 阅读文档 https://wiki.swoole.com php workman和swoole原来是两个东东 swoole的使用范围更广,能做更多事应该 websocket的介绍 阅读文档 http://www.ruanyifeng.com/blog/2017/05/websocket.html socket 与 websocket也是两个东东 阅读文档 https://blog.csdn.net/hguisu/article/detai

Swoole实现基于WebSocket的群聊私聊

本文属于入门级文章,大佬们可以绕过啦.如题,本文会实现一个基于Swoole的websocket聊天室(可以群聊,也可以私聊,具体还需要看数据结构的设计). 搭建Swoole环境 通过包管理工具 # 安装依赖包 $ sudo apt-get install libpcre3 libpcre3-dev # 安装swoole $ pecl install swoole # 添加extension拓展 $ echo extension=swoole.so > /etc/php5/cli/conf.d/s

Canvas + WebSocket + Redis 实现一个视频弹幕

原文出自:https://www.pandashen.com 页面布局 首先,我们需要实现页面布局,在根目录创建 index.html 布局中我们需要有一个 video 多媒体标签引入我们的本地视频,添加输入弹幕的输入框.确认发送的按钮.颜色选择器.字体大小滑动条,创建一个 style.css 来调整页面布局的样式,这里我们顺便创建一个 index.js 文件用于后续实现我们的核心逻辑,先引入到页面当中. HTML 布局代码如下: <!-- 文件:index.html --> <!DOC

使用PHP+Swoole实现的网页即时聊天工具:PHPWebIM

使用PHP+Swoole实现的网页即时聊天工具 全异步非阻塞Server,可以同时支持数百万TCP连接在线 同时支持websocket+comet2种兼容协议,可用于所有种类的浏览器包括IE 拥有完整的UI界面 支持单聊/群聊/组聊等功能 支持发送表情 支持永久保存聊天记录 基于Server PUSH的即时内容更新,登录/登出/状态变更/消息等会内容即时更新 最新的版本已经可以原生支持IE系列浏览器了,基于Http长连接 安装 swoole扩展 pecl install swoole swool

Swoole入门到实战打造高性能赛事直播平台

韩天峰力荐 Swoole入门到实战打造高性能赛事直播平台 第1章 课程介绍 欢迎大家来到swoole的课程!本章主要是介绍了swoole的一些特性,以及使用场景,并且分享了swoole在其他公司的一些案例,最后重点讲解了swoole学习的一些准备工作. 第2章 PHP 7 源码安装 很多工作好几年的PHPer对源码编译安装并不是很了解,其实这种情况是非常可怕的.本章我会教大家如何通过源码安装PHP7,并且简化PHP执行命令.最后重点讲解了源码安装踩到的坑,让您在源码编译安装过程中少走很多弯路.

Swoole 的微信扫码登录

微信应用的便捷,扫码登录方式越来越被现在的应用所使用.它因为不用去记住密码,只要有微信号即可方便快捷登录.微信的开放平台原生就有支持扫码登录的功能,不过大部分人还是在用公众平台,所以扫码登录只能自行实现.这里基于微信公众平台的带参数临时二维码,并且结合 Swoole 的 WebSocket 服务实现扫码登录.大体流程如下: 客户端打开登录界面,连接到 WebSocket 服务 WebScoket 服务生成带参数二维码返回给客户端 用户扫描展示的带参数二维码 微信服务器回调扫码事件并通知开发者服务

websocket 断线重连

服务端为swoole 的websocket 客户端js代码: //1.创建websocket客户端 var wsServer = 'ws://ip/'; var limitConnect = 3; // 断线重连次数 var timeConnect =0; webSocketInit(wsServer); //socket初始化 function webSocketInit(service){ var ws = new WebSocket(service); ws.onopen = functi

[HTML] websocket的模拟日志监控界面

模拟命令行的界面效果,使用swoole作为websocket的服务,重新做了下html的界面效果 <html> <head> <title>SwLog Montior-菜地</title> </head> <style> @charset "utf-8"; body { background-color:#000; margin:0px; padding:0px; color:rgb(0,198,83); font