初学PHP时，就想着用PHP做个聊天室，在同学面前装一波<尴尬>。那个时候只会使用简单的ajax。于是就用了轮训，那时候就在想为啥服务器就不能推送，想一想我发一条消息服务器直接推送给其他在线的同学多方便【此处省略一百万字】。
WebSocket 协议在2008年诞生，2011年成为国际标准，所有浏览器都已经支持了。所以直接在浏览器下写js就可以和后台进行交互了。
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
简单使用示例
<?php
/**
* websocket 简单控制多人对话
* 使用session方案，根据与不同人的、组的谈话设置session问题
* 并根据session进行迭代推送
* 更好的替代方案是使用redis
*/
//创建websocket服务器对象，监听0.0.0.0:9502端口
$ws = new swoole_websocket_server("0.0.0.0", 9502);
//监听WebSocket连接打开事件
$ws->on('open', function ($ws, $request) {
var_dump($request->fd, $request->get, $request->server);
$ws->push($request->fd, "hello, welcome\n");
});
/**
* 监听WebSocket消息事件
* 每次当js push信息的时候，就会触发这个函数
*/
$ws->on('message', function ($ws, $frame) {
echo "Message: {$frame->data}\n";
// $ws->push($frame->fd, "server: {$frame->data}");
// var_dump($ws->connections);
// 获取所有的链接$ws->connections
foreach($ws->connections as $fd)
{
$ws->push($fd, "hello{$fd}\n");
}
});
/**
* 监听WebSocket连接关闭事件
*/
$ws->on('close', function ($ws, $fd) {
echo "client-{$fd} is closed\n";
});
/**
* 执行脚本
*/
$ws->start();
由上面的代码可以看出swoole中websocket分为5个步骤
- 首先要创建swoole_websocket_sever实例，配置好需要监听的地址和端口等
- socket监听代码$ws->on()
其中配置了多个事件 open【监听初次连接】、message【监听用户推送】、close【监听关闭事件】等，详细的事件请查阅相关资料T_T！
- 启动websocket，$ws->start();
碰到的坑：
- webSocket关于属性connections报错
系统缺少pcre组建，而connections迭代器需要依赖这个库
- 安装pcre-dev（或者pcre-devel）
- 重新编译安装swoole
- 当突然断网的时候，来不及关闭链接怎么办<有待测试>
设置心跳检测时间
array( 'heartbeat_idle_time' => 600, 'heartbeat_check_interval' => 60 );
- 安全规范
WebSocket 不应当用于混合的上下文环境；也就是说，不应该在用HTTPS加载的页面中打开非安全版本的WebSocket，反之亦然。而实际上一些浏览器也明确禁止这一行为，包括 Firefox 8 及更高版本。
- 关于客户端连接ID：fd
官方文档解释：
- $fd是TCP客户端连接的标识符，在Server程序中是唯一的
- fd 是一个自增数字，范围是1 ～ 1600万，fd超过1600万后会自动从1开始进行复用
- $fd是复用的，当连接关闭后fd会被新进入的连接复用【ps：没有的互用就给他关闭】
- 正在维持的TCP连接fd不会被复用
- fd好像不支持修改滴
swoole之代码热更新
疑问
- 客户端请求之后swoole是怎样运行的
首先：
一个最基础的Swoole Server，需要有3个进程，分别是Master进程、Manager进程和Worker进程。
其次：
事实上，一个多进程模式下的Swoole Server中，有且只有一个Master进程；有且只有一个Manager进程；却可以有n个Worker进程。
首先，Master进程是一个多线程进程，其中有一组非常重要的线程，叫做Reactor线程（组），每当一个客户端连接上服务器的时候，都会由Master进程从已有的Reactor线程中，根据一定规则挑选一个，专门负责向这个客户端提供维持链接、处理网络IO与收发数据等服务。
如图：
Swoole的进程/线程模型：
阅读这篇Swoole的进程模型你可能会对本疑问解惑
小demo[可以根据自己的需要改的更好点]
WebSocket.php
<?php
class WebSocket
{
public $server;
public function __construct()
{
$this->server = new swoole_websocket_server("0.0.0.0", 9502);
$this->server->on('open', array($this, 'onOpen'));
$this->server->on('message', array($this, 'onMessage'));
$this->server->on('close', [$this, 'onClose']);
$this->server->start();
}
/**
* Open the connection
*
* @param swoole_websocket_server $server
* @param [type] $request
* @return void
*/
public function onOpen(swoole_websocket_server $server, $request)
{
//
}
/**
* Receive messages
* 当客户端调用send的时候触发message回掉函数
* @param swoole_websocket_server $server
* @param [type] $frame
* @return void
*/
public function onMessage(swoole_websocket_server $server, $frame)
{
$result = json_decode($frame->data);
switch ($result->type) {
case "connect":
$data = "Welcome {$result->text} to join us";
$this->iteration($server->connections, $data, "connect");
break;
case "message":
$this->iteration($server->connections, $result->text, "message");
break;
}
}
/**
* disconnect
*
* @param [type] $ser
* @param [type] $fd
* @return void
*/
public function onClose($ser, $fd)
{
echo "the cline {$fd} is close";
}
/**
* Radio
*
* @param [type] $connect
* @param [type] $data
* @param [type] $status
* @return void
*/
public function iteration($connect, $data, $status)
{
foreach ($connect as $fd) {
// console.log();
$this->server->push($fd, $this->JSON(array(
"type" => $status,
"data" => $data
)));
}
}
}
$server = new WebSocket();
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <title>精美CSS3聊天窗口DEMO演示</title> -->
<title>精美CSS3聊天窗口</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<style>
</style>
</head>
<body>
<div id="convo" data-from="Sonu Joshi">
<ul class="chat-thread">
<li class="left">Are we meeting today?</li>
<li class="right">yes, what time suits you?</li>
</ul>
<div class="inputButton">
<div>
<input class="input" type="text" placeholder="Search for...">
<input class="submit" type="button" value="Submit">
</div>
</div>
</div>
<div style="text-align:center;clear:both">
</div>
<div class="credits">
<a href="http://codepen.io/clintioo/pen/HAkjq">Original Pen</a> by
<a href="http://codepen.io/clintioo/pen/HAkjq">clintioo</a>
</div>
<script>
var dialog = document.querySelector('ul');
var infoInput = document.querySelectorAll("input");
var wsServer = 'ws://127.0.0.1:9502';
var websocket = new WebSocket(wsServer);
websocket.onopen = (evt) => {
console.log(evt);
websocket.send(JSON.stringify({
type: "connect",
text: "I‘m fine，Think you",
// "id":"",
// date: ""
}));
};
websocket.onmessage = (evt) => {
infoInput[0].value = "";
console.log(evt);
var info = eval("(" + evt.data + ")");
var createDom = document.createElement("li");
createDom.innerHTML = info['data'];
createDom.className = "left";
dialog.append(createDom);
}
websocket.onerror = function (evt, e) {
console.log('Error occured: ' + evt.data);
};
infoInput[1].addEventListener("click", () => {
if (infoInput[0].value) {
websocket.send(JSON.stringify({
type: "message",
text: infoInput[0].value,
}));
} else {
alert("发送信息不允许为空不允许为空");
}
});
document.onkeydown = (event) => {
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==13){
infoInput[1].click();
}
};
</script>
</body>
</html>
效果图
宝剑效果图
使用的是swoole扩展
时：2018-06-07
网友评论