使用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
使用swoole和websocket结合来制造弹幕的更多相关文章
- thinkphp 6.0 swoole扩展websocket使用教程
前言 ThinkPHP即将迎来最新版本6.0,针对目前越来越流行Swoole,thinkphp也推出了最新的扩展think-swoole 3.0. 介绍 即将推出的tp6.0,已经适配swoole.并 ...
- 用swoole和websocket开发简单聊天室
首先,我想说下写代码的一些习惯,第一,任何可配置的参数或变量都要写到一个config文件中.第二,代码中一定要有日志记录和完善的报错并记录报错.言归正传,swoole应该是每个phper必须要了解的, ...
- php 的swoole 和websocket 连接wss
1. 下载证书 $serv = new swoole_server('0.0.0.0', 9501, SWOOLE_PROCESS, SWOOLE_SOCK_TCP | SWOOLE_SSL); $s ...
- swoole实现websocket推送
环境配置: swoole 1.9.3.centos6.5(虚拟机).PHP7.01 思路: ①通过server中的collections取出fd ②写一个admin. ...
- swoole创建websocket服务器
目录 1 安装准备 1.1 安装swoole前必须保证系统已经安装了下列软件 1.2 下载并解压 1.3 编译安装成功后,修改php.ini 2 构建Swoole基本实例 2.1 tcp服务器实例 2 ...
- php swoole 和 websocket的初次碰撞
php swoole 扩展仿佛为php开发打开了一扇窗户 阅读文档 https://wiki.swoole.com php workman和swoole原来是两个东东 swoole的使用范围更广,能做 ...
- Swoole练习 websocket
WEBSOCKET 服务端代码 //创建websocket服务器对象,监听0.0.0.0:9502端口 $ws = new swoole_websocket_server("0.0.0.0& ...
- swoole websocket服务推送
用过workerman, 两个字"好用",对于swoole最近有时间也研究研究 swoole的websocket 很好实现 如官网 https://wiki.swoole.com/ ...
- PHP - Swoole websocket理解
php swoole实现websocket功能 1.确保安装了swoole扩展. 2.撰写服务程序 <?php //创建websocket服务器对象,监听0.0.0.0:9502端口 $ws = ...
随机推荐
- 学习ES6--data2
变量的解构: let [a, b, c] = [1, 2, 3] 等号左边的值等于等号右边的值,一一对应.假如右边没有相对应的值,如 let [a, b, c] = [1, 2, ] 这时候,c = ...
- Inno setup定制安装界面
Innosetup功能很强大,可以通过它提供的Wizard接口来定制界面,但我对PASCAL语言不熟悉,也不清楚通过那种接口可改动的范围有多大,最后做出来的效果是否好,所以选择了通过一个DLL来实现我 ...
- Linq-分组统计
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- poj 2482 Stars in Your Window （线段树：区间更新）
题目链接:http://poj.org/problem?id=2482 读完题干不免有些心酸(
- berkeley db 内存池 LRU算法
priority based lru in src/mp/mp_fget.c, __memp_fget(), 初始化 一个page buffer时, 设置其 priority: bhp->pri ...
- 《LINUX内核设计与实现》读书笔记之第五章
第五章——系统调用 5.1 与内核通信 1.为用户空间提供一种硬件的抽象接口 2.保证系统稳定和安全 3.除异常和陷入,是内核唯一的合法入口. API.POSIX和C库 关于Unix接口设计:提供机制 ...
- 创建Xml文件与修改Xml文件
/// <summary> /// 修改节点 /// </summary> /// <param name="user">UserSafe 实体 ...
- Android中的PopupWindow
1.功能 PopupWindow这个类用来实现一个弹出框,可以使用任意布局的View作为其内容,这个弹出框是悬浮在当前activity之上的,可以设置显示位置. 2.需求 弹出软键盘,实现键盘功能从而 ...
- Android JIT实时编译器的设置
在Android JIT实时编译是在Android 2.2之后才引入的,JIT编译器可以显著的提高机器的性能,经过测试,android 2.2的性能较android 2.1提高了 2-5倍.JIT提 ...
- 01 选择 Help > Install New Software，在出现的对话框里，点击Add按钮，在对话框的name一栏输入“ADT”，点击Archive...选择离线的ADT文件，contact all update ....千万不要勾选点击Add按钮，在对话框的name一栏输入“ADT”，点击Archive...选择离线的ADT文件，contact all update ....千万不要勾
引言 好久没碰过android,今天重新搭建了一次环境,遇到的问题记录下载.共以后使用. 安装 软件的软件有jdk+eclipse+adt+sdk 主要记录安装adt和sdk的过程,注意,adt和sd ...