php+websocket搭建简易聊天室实践

1、前言

  公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室。于是搜集各种资料看文档、找实例自己也写了个简单的聊天室。

  http连接分为短连接和长连接。短连接一般可以用ajax实现,长连接就是websocket。短连接实现起来比较简单,但是太过于消耗资源。websocket高效不过兼容存在点问题。websocket是html5的资源

  如果想要详细了解websocket长连接的原理请看https://www.zhihu.com/question/20215561。

  本文主要介绍websocket简易聊天室的实现步骤具体部分知识点的深入会给出链接或者麻烦读者自己搜集资料。

2、前端

  前端实现websocket很简单直接

  //连接websocket

var ws = new WebSocket("ws://127.0.0.1:8000");

  //成功连接websoc的时候

  ws.onopen = function(){}

  //成功获取服务端输出的消息

  ws.onmessage = function(e){}

//连接错误的时候
  ws.onerror = function(){}

    //向服务端发送数据

  ws.send();

3、后台

    websocket的难点主要在后台

  3.1websocket连接过程

  websocket 通信图解 这是一个简易的客户端和服务端的通信图解,php主要就做的就是接受加密key  并返回 其中完成套接字的创建和握手操作

  

  下图是一张详细的服务端处理websocket的流程图

  

  

3.2 代码实践

  服务端做的流程大致是:

    ①、挂起一个socket套接字进程等待连接

    ②、有socket连接之后遍历套接字数组

    ③、没有握手的进行握手操作,如果已经握手则接收数据解析并写入缓冲区进行输出

  下面是示例代码(我写的是一个类所以代码是根据函数分段的),文底给出github地址以及自己遇到的一些坑

1、首先是创建套接字

//建立套接字
        public function createSocket($address,$port)
        {
            //创建一个套接字
            $socket= socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
            //设置套接字选项
            socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1);
            //绑定IP地址和端口
            socket_bind($socket,$address,$port);
            //监听套接字
            socket_listen($socket);
            return $socket;
        }

2、将套接字放入数组

public function  __construct($address,$port)
        {
            //建立套接字
            $this->soc=$this->createSocket($address,$port);
            $this->socs=array($this->soc);

        }

3、挂起进程遍历套接字数组,主要操作都是在这里面完成的

public function run(){
            //挂起进程
            while(true){
                $arr=$this->socs;
                $write=$except=NULL;
                //接收套接字数字 监听他们的状态
                socket_select($arr,$write,$except, NULL);
                //遍历套接字数组
                foreach($arr as $k=>$v){
                    //如果是新建立的套接字返回一个有效的 套接字资源
                    if($this->soc == $v){
                        $client=socket_accept($this->soc);
                        if($client <0){
                            echo "socket_accept() failed";
                        }else{
                            // array_push($this->socs,$client);
                            // unset($this[]);
                            //将有效的套接字资源放到套接字数组
                            $this->socs[]=$client;
                        }
                    }else{
                        //从已连接的socket接收数据  返回的是从socket中接收的字节数
                        $byte=socket_recv($v, $buff,20480, 0);
                        //如果接收的字节是0
                        if($byte<7)
                            continue;
                        //判断有没有握手没有握手则进行握手,如果握手了 则进行处理
                        if(!$this->hand[(int)$client]){
                            //进行握手操作
                            $this->hands($client,$buff,$v);
                        }else{
                            //处理数据操作
                            $mess=$this->decodeData($buff);
                               //发送数据
                            $this->send($mess,$v);
                        }
                    }
                }
            }
        }

4、进行握手 流程是接收websocket内容从Sec-WebSocket-Key:中获取key并通过加密算法写入缓冲区客户端会进行验证(自动验证不需要我们处理)

public function hands($client,$buff,$v)
        {
            //提取websocket传的key并进行加密  (这是固定的握手机制获取Sec-WebSocket-Key:里面的key)
            $buf  = substr($buff,strpos($buff,‘Sec-WebSocket-Key:‘)+18);
            //去除换行空格字符
            $key  = trim(substr($buf,0,strpos($buf,"\r\n")));
             //固定的加密算法
            $new_key = base64_encode(sha1($key."258EAFA5-E914-47DA-95CA-C5AB0DC85B11",true));
            $new_message = "HTTP/1.1 101 Switching Protocols\r\n";
            $new_message .= "Upgrade: websocket\r\n";
            $new_message .= "Sec-WebSocket-Version: 13\r\n";
            $new_message .= "Connection: Upgrade\r\n";
            $new_message .= "Sec-WebSocket-Accept: " . $new_key . "\r\n\r\n";
            //将套接字写入缓冲区
            socket_write($v,$new_message,strlen($new_message));
            // socket_write(socket,$upgrade.chr(0), strlen($upgrade.chr(0)));
            //标记此套接字握手成功
            $this->hand[(int)$client]=true;
        }

5、解析客户端的数据(我这里没有进行加密,如果有需要也可以自己加密 )

//解析数据
        public  function  decodeData($buff)
        {
            //$buff  解析数据帧
            $mask = array();
            $data = ‘‘;
            $msg = unpack(‘H*‘,$buff);  //用unpack函数从二进制将数据解码
            $head = substr($msg[1],0,2);
            if (hexdec($head{1}) === 8) {
                $data = false;
            }else if (hexdec($head{1}) === 1){
                $mask[] = hexdec(substr($msg[1],4,2));
                $mask[] = hexdec(substr($msg[1],6,2));
                $mask[] = hexdec(substr($msg[1],8,2));
                $mask[] = hexdec(substr($msg[1],10,2));
                   //遇到的问题  刚连接的时候就发送数据  显示 state connecting
                $s = 12;
                $e = strlen($msg[1])-2;
                $n = 0;
                for ($i=$s; $i<= $e; $i+= 2) {
                    $data .= chr($mask[$n%4]^hexdec(substr($msg[1],$i,2)));
                    $n++;
                }
                //发送数据到客户端
                   //如果长度大于125 将数据分块
                   $block=str_split($data,125);
                   $mess=array(
                       ‘mess‘=>$block[0],
                       );
                return $mess;
            }

6、将套接字写入缓冲区

//发送数据
        public function send($mess,$v)
        {
            //遍历套接字数组 成功握手的  进行数据群发
            foreach ($this->socs as $keys => $values) {
                //用系统分配的套接字资源id作为用户昵称
                   $mess[‘name‘]="Tourist‘s socket:{$v}";
                   $str=json_encode($mess);
                   $writes ="\x81".chr(strlen($str)).$str;
                   // ob_flush();
                   // flush();
                   // sleep(3);
                   if($this->hand[(int)$values])
                       socket_write($values,$writes,strlen($writes));
               }
        }

7、运行方法

github地址[email protected]:rsaLive/websocket.git

①最好在控制台运行server.php

转到server.php脚本目录(可以先php -v 看下有没有配置php如果没有Linux配置下bash windows 配置下path)

php -f server.php

如果有错误会提示

②通过服务器访问html文件

8、踩过的坑,打开调试工作方便查看错误

server.php 挂起的进程中可以打印输出的,如果出现问题可以在代码中加入打印来调试

可以在各个判断里面做标记在控制台查看代码运行在哪个区间

不过每次修改完代码之后需要重新运行脚本 php server.php

如果出现这种错误可能是

  1、在与服务器初始套接字的时候发送数据 (在第一次与服务器验证握手的时候不能发送内容)

  2、如果已经验证过了但是客户端没有发送或者发送的消息为空也会出现这样的情况

    所以要检验已连接的套接字的数据

③可能浏览器不支持或者服务端没有开启socket开始之前最好验证下

if (window.WebSocket){
    console.log("This browser supports WebSocket!");
} else {
    console.log("This browser does not support WebSocket.");
}

如有不正欢迎指出

时间: 2024-08-02 06:09:06

php+websocket搭建简易聊天室实践的相关文章

使用Html5下WebSocket搭建简易聊天室

一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站为了实现即时通讯(real-time),所用的技术都是轮询(polling).轮询是在特定的的时间间隔(time interval)(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器.这种传统的HTTP request d的模式带来很明显的缺点 –

Html Websocket搭建右下角聊天室

最近闲来无事,为我的网站增加了聊天室功能,这里主要用到了websocket技术,这时html5的一种新技术 controller部分 package main.java.web.news; import java.io.IOException; import java.util.concurrent.CopyOnWriteArraySet; import javax.websocket.*; import javax.websocket.server.ServerEndpoint; /** *

基于spring4 websocket的简易聊天室

一:创建maven webapp项目 编辑pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0

websocket之简易聊天室

一,带昵称的群聊 #!/usr/bin/env python # -*- coding:utf8 -*- import json from flask import Flask, request, render_template from geventwebsocket.websocket import WebSocket from gevent.pywsgi import WSGIServer from geventwebsocket.handler import WebSocketHandl

docker搭建swoole简易聊天室

docker搭建swoole的简易聊天室 首先pull镜像 docker pull docker.io/kong36088/nginx-php7-swoole 创建容器 docker run --name {自己创建的名字} -p 9501:9501 -p 8089:80 -d -it kong36088/nginx-php7-swoole /bin/bash 进入容器 docker exec -it {容器名字或id} /bin/bash 进入容器之后进入nginx配置文件 cd /etc/n

Java和WebSocket开发网页聊天室

小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项目简介 WebSocket是HTML5一种新的协议,它实现了浏览器与服务器全双工通信,这里就将使用WebSocket来开发网页聊天室,前端框架会使用AmazeUI,后台使用Java,编辑器使用UMEditor. 二.涉及知识点 网页前端(HTML+CSS+JS)和Java 三.软件环境 Tomcat

socket.io入门,简易聊天室

介绍 通常我们web使用的是http协议,但是 HTTP 协议有一个缺陷:通信只能由客户端发起. 所以我们需要一个可以由服务端主动发出的协议,即WebSocket. WebSocket是HTML5新增的一种通信协议,其特点是服务端可以主动向客户端推送信息,客户端也可以主动向服务端发送信息,是真正的双向平等对话,属于服务器推送技术的一种. Socket.IO 是一个基于 Node.js 的实时应用程序框架,在即时通讯.通知与消息推送,实时分析等场景中有较为广泛的应用. socket.io 包含两个

nodejs入门——搭建一个聊天室应用

个人博客 http://mvc.coding.io/ 1入门教程推荐 node入门 很早之前看的就是这个,比较浅显易懂,看一遍就明白nodejs到底是怎么一回事儿了 2开源项目 昨天在coding上看到了一个nodejs聊天室,fork了一份 nodejs聊天室 3环境搭建 nodejs官网,下载最新版本(本人电脑win7 64位),安装过程下一步下一步就行,安装会自动配置环境变量, 建议安装目录自己选择一下,别默认安装在C:\Program Files\ 目录下(目录有空格 会出现一些问题)

使用WebSocket实现网页聊天室

知道WebSocket挺久了,但是一直没提起兴趣去了解它. 今天听@成熟的毛毛虫 说到slack.小小的试用了一下,发现slack的聊天功能做得相当强大,看了下网络请求,发现是基于WebSocket实现的.顿时提起兴趣,想了解下这强大的WebSocket. 先了解下WebSocket. 开源中国的介绍:http://www.oschina.net/p/websocket 百度百科的介绍:http://baike.baidu.com/link?url=yMTBVobtkp1E1a0wrRJlnEX