html5 WebSocket 与 PHP socket 聊天室原理
html js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天室</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="head"></div>
<div id="wrapper">
<div id="message">
</div>
<div id="action">
<textarea id="data"></textarea>
<button id="send">发送</button>
</div>
</div>
<script>
(function() {
var socket = new WebSocket('ws://127.0.0.1:8008');
var send = document.getElementById('send');
var data = document.getElementById('data');
var message = document.getElementById('message');
var wrapper = document.getElementById('wrapper');
var height = (wrapper.offsetHeight) -270;
message.style.height = height+'px';
socket.onopen = function(event) {
message.innerHTML = '<p><span>连接成功！</span></p>';
}
socket.onmessage = function(event) {
var dl = document.createElement('dl');
var jsonData = JSON.parse(event.data);
dl.innerHTML = "<dt><img src="+jsonData.avatar+"><dt><dd><span></span>"+jsonData.content+"</dd>";
message.appendChild(dl);
message.scrollTop = message.scrollHeight;
}
socket.onerror = function() {
message.innerHTML = '<p><span>连接失败！</span></p>';
}
send.addEventListener('click', function() {
var content = data.value;
if(content.length <= 0) {
alert('消息不能为空！');
return false;
}
var avatar = Math.random();
var message = {
"avatar" : 'images/avatar.jpg',
"content" : content
}
var json = JSON.stringify(message);
socket.send(json);
data.value = ''; data.focus();
});
})();
</script>
</body>
</html>
PHP
<?php
class WebSocket {
private $socket;
private $accept;
private $isHand = array();
public function __construct($host, $port, $max) {
$this->socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
socket_set_option($this->socket, SOL_SOCKET, SO_REUSEADDR, TRUE);
socket_bind($this->socket, $host, $port);
socket_listen($this->socket, $max);
}
public function start() {
while(true) {
$cycle = $this->accept;
$cycle[] = $this->socket;
socket_select($cycle, $write, $except, null);
foreach($cycle as $sock) {
if($sock === $this->socket) {
$client = socket_accept($this->socket);
$this->accept[] = $client;
$key = array_keys($this->accept);
$key = end($key);
$this->isHand[$key] = false;
} else {
$length = socket_recv($sock, $buffer, 204800, 0);
$key = array_search($sock, $this->accept);
if($length < 7) {
$this->close($sock);
continue;
}
if(!$this->isHand[$key]) {
$this->dohandshake($sock, $buffer, $key);
} else {
// 先解码，再编码
$data = $this->decode($buffer);
$data = $this->encode($data);
// 判断断开连接（断开连接时数据长度小于10）
if(strlen($data) > 10) {
foreach($this->accept as $client) {
socket_write($client, $data, strlen($data));
}
}
}
}
}
}
}
/**
* 首次与客户端握手
*/
public function dohandshake($sock, $data, $key) {
if (preg_match("/Sec-WebSocket-Key: (.*)\r\n/", $data, $match)) {
$response = 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: " . $response . "\r\n\r\n";
socket_write($sock, $upgrade, strlen($upgrade));
$this->isHand[$key] = true;
}
}
/**
* 关闭一个客户端连接
*/
public function close($sock) {
$key = array_search($sock, $this->accept);
socket_close($sock);
unset($this->accept[$key]);
unset($this->handshake[$key]);
}
/**
* 解码过程
*/
public function decode($buffer) {
$len = $masks = $data = $decoded = null;
$len = ord($buffer[1]) & 127;
if ($len === 126) {
$masks = substr($buffer, 4, 4);
$data = substr($buffer, 8);
}
else if ($len === 127) {
$masks = substr($buffer, 10, 4);
$data = substr($buffer, 14);
}
else {
$masks = substr($buffer, 2, 4);
$data = substr($buffer, 6);
}
for ($index = 0; $index < strlen($data); $index++) {
$decoded .= $data[$index] ^ $masks[$index % 4];
}
return $decoded;
}
/**
* 编码过程
*/
public function encode($buffer) {
$length = strlen($buffer);
if($length <= 125) {
return "\x81".chr($length).$buffer;
} else if($length <= 65535) {
return "\x81".chr(126).pack("n", $length).$buffer;
} else {
return "\x81".char(127).pack("xxxxN", $length).$buffer;
}
}
}
$webSocket = new WebSocket('127.0.0.1', 8008, 100);
$webSocket->start();
?>
html5 WebSocket 与 PHP socket 聊天室原理的更多相关文章
- HTML5新特性 websocket(重点)--多对多聊天室
一.html5新特性 websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...
- Node.js+websocket+mongodb实现即时聊天室
ChatRoom Node.js+websocket+mongodb实现即时聊天室 A,nodejs简介:Node.js是一个可以让javascript运行在服务器端的平台,它可以让javascrip ...
- nodejs与websocket模拟简单的聊天室
nodejs与websocket模拟简单的聊天室 server.js const http = require('http') const fs = require('fs') var userip ...
- Java Socket聊天室编程(二)之利用socket实现单聊聊天室
这篇文章主要介绍了Java Socket聊天室编程(二)之利用socket实现单聊聊天室的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 在上篇文章Java Socket聊天室编程(一)之 ...
- Java Socket聊天室编程(一)之利用socket实现聊天之消息推送
这篇文章主要介绍了Java Socket聊天室编程(一)之利用socket实现聊天之消息推送的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 网上已经有很多利用socket实现聊天的例子了 ...
- Django中使用websocket并实现简易聊天室
django使用websocket并实现简易聊天室 django默认只支持http协议 如果你想让django即支持http协议又支持websocket协议,则需要做以下配置 前期配置 前提需要安装c ...
- python socket 聊天室
socket 发送的时候,使用的是全双工的形式,不是半双工的形式.全双工就是类似于电话,可以一直通信.并且,在发送后,如果又接受数据,那么在这个接受到数据之前,整个过程是不会停止的.会进行堵塞,堵塞就 ...
- TCP/IP以及Socket聊天室带类库源码分享
TCP/IP以及Socket聊天室带类库源码分享 最近遇到个设备,需要去和客户的软件做一个网络通信交互,一般的我们的上位机都是作为客户端来和设备通信的,这次要作为服务端来监听客户端,在这个背景下,我查 ...
- 如何利用WebSocket实现网页版聊天室
花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo,期间还走过了一段"看似弯曲"的道路,但是我想其实也不算是弯路吧,因为你走过的路必将留下你的足迹.这 ...
随机推荐
- Service的启动方式
Service的启动方式: 两种启动模式,一种是非绑定启动模式,另一种是绑定启动模式. 一.startservice方式启动 Intent intent = new Intent(this, Firs ...
- 树形dp Codeforces Round #364 (Div. 1)B
http://codeforces.com/problemset/problem/700/B 题目大意:给你一棵树,给你k个树上的点对.找到k/2个点对,使它在树上的距离最远.问,最大距离是多少? 思 ...
- Qt多线程编程总结（一）
http://blog.csdn.net/mznewfacer/article/details/6965799 QMutex类 一个线程可以锁定互斥量,并且在它锁定之后,其它线程就不能再锁定这个互斥量 ...
- Qt 5入门指南之Qt Quick编程示例
编程示例 使用Qt创建应用程序是十分简单的.考虑到你的使用习惯,我们编写了两套教程来实现两个相似的应用程序,但是使用了 不同的方法.在开始之前,请确保你已经下载了QtSDK的商业版本或者开源版本,并且 ...
- Phonegap解决错误:Error initializing Cordova:Class not found
Phonegap 解决错误: Alert [ERROR]Error initializing Cordova:Class not found 发现bug后找原因 网上说是 因为找不到 ...
- FirstOrDefault()的重载方法
FirstOrDefault方法的使用总结: 现有一集合对象list, 其中集合对象调用FirstOrDefault()方法, list.FirstOrDefault()返回集合中第一个元素, 若集合 ...
- linux 命令--sed
简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(pattern space),接着用sed命令处理缓冲区中的内容,处 ...
- php 高并发下数据同步的问题
1.加锁缺点:降低性能优点:减少代码逻辑复杂度(题主现在这样超过1w条就删数据的逻辑,感觉看起来就点糟糕啊,如果整个系统一复杂,这样的来回写数据,你确定你的逻辑还维护得下去?建议题主梳理一下代码的逻辑 ...
- SCRIPT7002: XMLHttpRequest: 网络错误 0x2ef3, 由于出现错误 00002ef3 
项目使用的是tomcat7 ,浏览器是ie11 突然打开浏览器发现不能获取数据了 tomcat conf server.xml 文件 <Connector port="8080&quo ...
- js跨域总结
一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. 比如 ...