先给大家开一个原始的websocket的连接使用范例
php /* * recv是从套接口接收数据,也就是拿过来,但是不知道是什么 * read是读取拿过来的数据,就是要知道recv过来的是什么 * write是向套接口写数据,但是只是写,并没有发送出去 * send是write之后,将数据传输到套接口,以便其他人recv之后read */ //设置一些基本的变量 $host="192.168.1.68"; //链接ip $port='1423'; //端口号 //设置超时时间 set_time_limit(0); //创建一个Socket $socket=socket_create(AF_INET,SOCK_STREAM,0) or die("Could not create socket\n");//绑定Socket到端口 $result=socket_bind($socket,$host,$port) or die("Could not bind to socket\n");//开始监听链接 $result=socket_listen($socket,3) or die("Could not setup socket listener\n");//accept in coming connections //另一个Socket来处理通信 $spawn=socket_accept($socket) or die("Could not accept in coming connection\n");//获得客户端的输入 $input=socket_read($spawn,1024) or die("Could not read input\n");//清空输入字符串 $input=trim($input);//处理客户端输入并返回结果 $output=strrev($input)."\n"; socket_write($spawn,$output,strlen($output)) or die("Could not write out put\n");//关闭 socket_close($spawn); socket_close($socket);
/*
* PHP服务器端的代码
* 实现webSocket的实现,先得是客户端发起请求
* 在服务器端这边,创建socket操作,连接socket
* 接下来进行死循环,对所有的连接进行监听
* 有消息发过来时,进行推送,
* 1、对发送过来的数据要先进行解密,
* 2、对推送的消息要进行加密
* 这样做是为了推送的消息的安全性
* */
ob_implicit_flush(); //将打开或关闭绝对(隐式)刷送。绝对(隐式)刷送将导致在每次输出调用后有一次刷送操作 //地址与接口,即创建socket时需要服务器的IP和端口 $sk = new WebSocket('127.0.0.1',1208); //对创建的socket循环进行监听,处理数据 $sk->Run(); class WebSocket{ public $sockets; //socket的连接池,即client连接进来的socket标志 public $users; //所有client连接进来的信息,包括socket、client名字等 public $master; //socket的resource,即前期初始化socket时返回的socket资源 /* * 构造函数 * 实例化的时候,自动运行 * */ public function __construct($address, $port){ //创建socket并把保存socket资源在$this->master $this->master = $this->WebSocket($address, $port); //$socket //创建socket连接池 连接的用户 $this->sockets = array($this->master); //$clients } /* * 传相应的IP与端口进行创建socket操作 * 连接socket 创建tcp socket * */ function WebSocket($address,$port){ $server = socket_create(AF_INET, SOCK_STREAM, SOL_TCP); socket_set_option($server, SOL_SOCKET, SO_REUSEADDR, 1);//1表示接受所有的数据包 socket_bind($server, $address, $port); socket_listen($server); //监听端口 return $server; } //对创建的socket循环进行监听,处理数据 public function Run(){ $null = NULL; //死循环,直到socket断开 while(true){ $changes = $this->sockets; $socket = $this->master; /* 这个函数是同时接受多个连接的关键,我的理解它是为了阻塞程序继续往下执行。 socket_select ($sockets, $write = NULL, $except = NULL, NULL, timeout); $sockets可以理解为一个数组,这个数组中存放的是文件描述符。当它有变化(就是有新消息到或者有客户端连接/断开)时,socket_select函数才会返回,继续往下执行。 $write是监听是否有客户端写数据,传入NULL是不关心是否有写变化。 $except是$sockets里面要被排除的元素,传入NULL是”监听”全部。 最后一个参数是超时时间 如果为0:则立即结束 如果为n>1: 则最多在n秒后结束,如遇某一个连接有新动态,则提前返回 如果为null:如遇某一个连接有新动态,则返回 */ /* * @socket_select 第四个参数 * 第一,若将NULL以形参传入,即不传入时间结构,就是将select置于阻塞状态,一定等到监视文件描述符集合中某个文件描述符发生变化为止; * 第二,若将时间值设为0秒0毫秒,就变成一个纯粹的非阻塞函数,不管文件描述符是否有变化,都立刻返回继续执行,文件无变化返回0,有变化返回一个正值; * 第三,timeout的值大于0,这就是等待的超时时间,即 select在timeout时间内阻塞,超时时间之内有事件到来就返回了,否则在超时后不管怎样一定返回,返回值同上述。 */ socket_select($changes,$null,$null,NULL); //socket_select($changed, $null, $null, 0, 10); /* * 如果有新的链接进来 * */ //如果有新的连接 if (in_array($socket, $changes)) { //接受一个socket连接 $socket_new = socket_accept($socket); //给新连接进来的socket一个唯一的ID $changes = $this->sockets[] = $socket_new; //将新连接进来的socket存进连接池 //通过socket获取数据执行handshake $header = socket_read($socket_new, 1024); $this->perform_handshaking($header, $socket_new, '127.0.0.1', '1208'); //握手协议 //获取client ip 编码json数据,并发送通知 /* * 获取远程套接口的名字,包括它的IP和端口。 * */ socket_getpeername($socket_new, $ip); $response = $this->mask(json_encode(array('type'=>'system', 'message'=>'ip:'.$ip.' 已连接!'))); $this->send_message($response); $found_socket = array_search($socket, $changes); unset($changes[$found_socket]); } //轮询 每个client socket 连接 发送数据 foreach ($changes as $key=>$changed_socket) { //如果有client数据发送过来 /* * @socket_recv ( resource $socket , string &$buf , int $len , int $flags ) * 从已连接的socket接收数据 * */ while(socket_recv($changed_socket, $buf, 1024, 0) >= 1) { //解码发送过来的数据 $received_text = $this->unmask($buf); $tst_msg = json_decode($received_text); $user_name = $tst_msg->name; $user_message = $tst_msg->message; $this->writeLog('消息:', json_decode($received_text, true)); //把消息发送回所有连接的 client 上去 $response_text = $this->mask(json_encode(array('type'=>'usermsg', 'name'=>$user_name, 'message'=>$user_message))); $this->send_message($response_text); break 2; } //检查offline的client $buf = @socket_read($changed_socket, 1024, PHP_NORMAL_READ); if ($buf === false) { $found_socket = array_search($changed_socket, $changes); /* * 获取远程套接口的名字,包括它的IP和端口。 * */ socket_getpeername($changed_socket, $ip); unset($changes[$found_socket]); $response = $this->mask(json_encode(array('type'=>'system', 'message'=>'ip:'.$ip.' 已断开!'))); $this->send_message($response); } } } /* * 在监听外面关闭socket链接 * 关闭监听的socket * */ socket_close($this->master); } /* * 对发送的数据进行编码 * */ public function mask($text) { $b1 = 0x80 | (0x1 & 0x0f); $length = strlen($text); if ($length <= 125) { $header = pack('CC', $b1, $length); } elseif ($length > 125 && $length < 65536) { $header = pack('CCn', $b1, 126, $length); } elseif ($length >= 65536) { $header = pack('CCNN', $b1, 127, $length); } return $header.$text; } /* * 对接受来的数据进行解码 * */ public function unmask($text) { /* * @ ord * 函数返回字符串的首个字符的 ASCII 值。 * */ $length = ord($text[1]) & 127; if ($length == 126) { $masks = substr($text, 4, 4); $data = substr($text, 8); } elseif ($length == 127) { $masks = substr($text, 10, 4); $data = substr($text, 14); } else { $masks = substr($text, 2, 4); $data = substr($text, 6); } $text = ""; $len = strlen($data); for ($i = 0; $i < $len; $i++) { $text .= $data[$i] ^ $masks[$i%4]; } return $text; } //握手的逻辑 public function perform_handshaking($receved_header,$client_conn, $host, $port) { $headers = array(); $lines = preg_split("/rn/", $receved_header); foreach($lines as $line) { $line = chop($line); if(preg_match('/A(S ): (.*)z/', $line, $matches)) { $headers[$matches[1]] = $matches[2]; } } if (preg_match("/Sec-WebSocket-Key: (.*)\r\n/", $receved_header, $match)) { $key = base64_encode(sha1($match[1] . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11', true)); $upgrade = "HTTP/1.1 101 Switching Protocol\r\n" . "Upgrade: websocket\r\n" . "Connection: Upgrade\r\n" . "Sec-WebSocket-Accept: ".$key."\r\n\r\n"; socket_write($client_conn,$upgrade,strlen($upgrade)); } return true; } /* * @socket_ * recv是从套接口接收数据,也就是拿过来,但是不知道是什么 * read是读取拿过来的数据,就是要知道recv过来的是什么 * write是向套接口写数据,但是只是写,并没有发送出去 * send是write之后,将数据传输到套接口,以便其他人recv之后read * 发送消息 * */ //发送消息的方法 public function send_message($msg) { //global $this->sockets; foreach($this->sockets as $changed_socket) { @socket_write($changed_socket,$msg,strlen($msg)); } return true; } /* * 将发送的消息记录到log中 * var_export 输出或返回一个变量的字符串表示 * */ //打印本地Err public function writeLog($str, $arr) { $cont = var_export($arr, true)."\n"; $time = date('Y-m-d H:i:s',time()); file_put_contents('./WebSocket/mylog', $time, FILE_APPEND); file_put_contents('./WebSocket/mylog', $str, FILE_APPEND); file_put_contents('./WebSocket/mylog', $cont."\n", FILE_APPEND); echo $cont; } }
//客户端的实现代码
doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>HTML5 websocket 网页聊天室 javascript phptitle>
<style type="text/css">
body,p{margin:0px; padding:0px; font-size:14px; color:#333; font-family:Arial, Helvetica, sans-serif;}
#ltian,.rin{width:98%; margin:5px auto;}
#ltian{border:1px #ccc solid;overflow-y:auto; overflow-x:hidden; position:relative;}
#ct{margin-right:111px; height:100%;overflow-y:auto;overflow-x: hidden;}
#us{width:110px; overflow-y:auto; overflow-x:hidden; float:right; border-left:1px #ccc solid; height:100%; background-color:#F1F1F1;}
#us p{padding:3px 5px; color:#08C; line-height:20px; height:20px; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#us p:hover,#us p:active,#us p.ck{background-color:#069; color:#FFF;}
#us p.my:hover,#us p.my:active,#us p.my{color:#333;background-color:transparent;}
button{float:right; width:80px; height:35px; font-size:18px;}
input{width:100%; height:30px; padding:2px; line-height:20px; outline:none; border:solid 1px #CCC;}
.rin p{margin-right:160px;}
.rin span{float:right; padding:6px 5px 0px 5px; position:relative;}
.rin span img{margin:0px 3px; cursor:pointer;}
.rin span form{position:absolute; width:25px; height:25px; overflow:hidden; opacity:0; top:5px; right:5px;}
.rin span input{width:180px; height:25px; margin-left:-160px; cursor:pointer}
#ct p{padding:5px; line-height:20px;}
#ct a{color:#069; cursor:pointer;}
#ct span{color:#999; margin-right:10px;}
.c2{color:#999;}
.c3{background-color:#DBE9EC; padding:5px;}
.qp{position:absolute; font-size:12px; color:#666; top:5px; right:130px; text-decoration:none; color:#069;}
.tc{text-align:center; margin-top:5px;}
style>
head>
<body>
<div id="ltian">
<div id="us" class="jb">div>
<div id="ct">div>
<a href="javascript:;" class="qp" onClick="this.parentNode.children[1].innerHTML=''">清屏a>
div>
<div class="rin">
<button id="sd">发送button>
<p><input id="message">p>
div>
<div id="ems"><p>p><p class="tc">p>div>
body>
<script src="http://www.study.com/Reids/jquery-1.11.3.min.js">script>
<script>
//console.log(Math.ceil((Math.random()*100000)+(Math.random()*100000)));
if(typeof(WebSocket)=='undefined'){
alert('你的浏览器不支持 WebSocket ,推荐使用Google Chrome 或者 Mozilla Firefox');
}
script>
<script>
$(function(){
var websocket;
var name = Math.ceil((Math.random()*100000)+(Math.random()*100000));
if(window.WebSocket) {
websocket = new WebSocket('ws://'+ip+':1208/WebSocket/Class/WebSocket.php');
//连接建立
websocket.onopen = function(evevt) {
console.log("WebSocket已连接!");
$('#ct').append('大家好,WebSocket已连接!
');
}
//收到消息
websocket.onmessage = function(event) {
var msg = JSON.parse(event.data); //解析收到的json消息数据
console.log(msg);
if(msg.type == 'system'){
$('#ct').append(''+msg.message+'
');
console.log(msg.message);
}else if(msg.type == 'usermsg'){
$('#ct').append(''+msg.message+'用户:
'+msg.name+'');
console.log(msg.message);
}
}
//发生错误
websocket.onerror = function(event) {
console.log("WebSocket连接出错!"+ event.data);
$('#ct').append('WebSocket Error ' + event.data + '
');
}
//连接关闭
websocket.onclose = function(event) {
console.log('WebSocket已断开连接');
$('#ct').append('WebSocket已关闭!
');
}
/* 发送消息 */
function send() {
var message = $('#message').val();
if(!message) {
alert('发送消息不能为空!'); return false;
}
var msg = { message: message, name: name };
try{
websocket.send(JSON.stringify(msg));
$('#message').val('');
//websocket.send(msg);
} catch(ex) {
console.log(ex);
}
}
//按下enter键发送消息
$(window).keydown(function(event) {
if(event.keyCode == 13) {
send();
}
});
//点发送按钮发送消息
$('#sd').bind('click',function() {
send();
});
} else {
console.log('你的浏览器不支持Web Socket!');
}
})
script>