Socket学习 - 撕开websocket神秘的外衣

最新推荐文章于 2022-09-09 14:52:29 发布
最新推荐文章于 2022-09-09 14:52:29 发布
阅读量2.3k 收藏 2
点赞数 1
分类专栏： PHP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_26672553/article/details/54290201
版权

websocket，我们可以理解嵌入在浏览器中的socket客户端
那么问题来了
1、它有专门的协议？
2、是否和HTTP协议一样，和服务端交互
3、服务端代码怎么写？
这里写图片描述

1.客户端websocket_client.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //创建一个socket实例
    var socket = new WebSocket('ws://127.0.0.1:9090');

    //打开socket
    socket.onopen = function (e) {
        //发送一个初始化消息
        socket.send('init msg');
    };

    socket.onmessage = function(e){
        console.log('收到消息',e);
    };

    //监听socket的关闭
    socket.onclose = function(e){
        console.log('关闭',e);
    };
</script>
</body>
</html>

2.服务端websocket_server.php

<?php

$server = socket_create(AF_INET,SOCK_STREAM,SOL_TCP);  // 购买电话机
socket_bind($server,'127.0.0.1',9090);  // 绑定电话机
socket_listen($server,5);   // 开机

while(true){
    $client = socket_accept($server);   //接收客户端连接
    $buf = socket_read($client,8024);   //一次读取数据的长度
    echo $buf;

    //回复
    socket_write($client,'404');

    //关掉客户端
    socket_close($client);
}

//关机
socket_close($server);

3.把服务端运行起来，然后浏览器 客户端访问：
http://localhost:63343/socket/websocket_client.html
这里写图片描述
发现报错了，报错并不说明websocket就没有连接，我们查看服务端控制台会打印如下内容：
这里写图片描述
说明，只要客户端var socket = new WebSocket('ws://127.0.0.1:9090'); 这一步，服务端就会收到。

4.报错的原因是：服务端没有按照websocket的协议回复内容

握手方法

客户端指定服务端发送一个握手请求，如果服务端返回合法的HTTP头，则握手成功。
1、客户端会发送一个字段：Sec-WebSocket-Key: xxxxxooooooo
2、服务端需要截取此值，把该值累加字符串258EAFA5-E914-47DA-95CA-C5AB0DC85B11，然后进行sha1，最后再base64_encode
3、拼凑对应的响应协议内容

<?php

$server = socket_create(AF_INET,SOCK_STREAM,SOL_TCP);  // 购买电话机
socket_bind($server,'127.0.0.1',9090);  // 绑定电话机
socket_listen($server,5);   // 开机

while(true){
    $client = socket_accept($server);   //接收客户端连接
    $buf = socket_read($client,8024);   //一次读取数据的长度
    //echo $buf;

    if(preg_match("/Sec-WebSocket-Key: (.*)\r\n/i",$buf,$matches)){
        $key = base64_encode(sha1($matches[1].'258EAFA5-E914-47DA-95CA-C5AB0DC85B11',true));
        $res = 'HTTP/1.1 101 Switching Protocol'.PHP_EOL
            .'Upgrade: Websocket'.PHP_EOL
            .'Connection: Upgrade'.PHP_EOL
            .'WebSoket-Location: ws://127.0.0.1:9090'.PHP_EOL
            .'Sec-WebSocket-Accept:'.$key.PHP_EOL.PHP_EOL;

        //socket回复
        socket_write($client,$res,strlen($res));
        socket_write($client,'hello websocket');
    }

}

//关机
socket_close($server);

握手成功后就比较复杂了

相关的数据发送是需要有一定的格式的，这里边涉及到一些二进制的计算，服务端要对数据进行处理，我们这里就不深入了。
拿来主义，直接使用现成的代码

/**
 * @param $msg要处理的数据内容
 */
function buildMsg($msg){
    $frame = [];
    $frame[0] = '81';
    $len = strlen($msg);
    if($len < 126){
        $frame[1] = $len < 16 ? '0'.dechex($len) : dechex($len);
    }elseif($len < 65025){
        $s = dechex($len);
        $frame[1] = '7e'.str_repeat('0',4-strlen($s)).$s;
    }else{
        $s = dechex($len);
        $frame[1] = '7f'.str_repeat('0',16-strlen($s)).$s;
    }

    $data = '';
    $l = strlen($msg);
    for($i=0;$i<$l;$i++){
        $data .= dechex(ord($msg{$i}));
    }
    $frame[2] = $data;
    $data = implode('',$frame);
    return pack('H*',$data);
}

在服务端回复数据的时候，用此函数处理

 socket_write($client,buildMsg("hello websocket")); //注意此处要双引号

然后客户端浏览器请求:
这里写图片描述
我们客户端监听到了socket服务端的消息

socket.onmessage = function(e){
        console.log('收到消息',e);
    };

我们继续优化，完成消息发送

客户端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="sendMsg()">发送消息</button>
<script>
    //创建一个socket实例
    var socket = new WebSocket('ws://127.0.0.1:9090');

    //打开socket
    socket.onopen = function (e) {
        //发送一个初始化消息
        socket.send('init msg');
    };

    socket.onmessage = function(e){
        console.log('收到消息',e);
    };

    //监听socket的关闭
    socket.onclose = function(e){
        console.log('关闭',e);
    };

    //自定义按钮事件
    function sendMsg(){
        socket.send('hello server');
    }
</script>
</body>
</html>

客户端点击按钮，发送一条消息给服务端。

服务端websocket_server.php需要做相应处理：

<?php

$server = socket_create(AF_INET,SOCK_STREAM,SOL_TCP);  // 购买电话机
socket_bind($server,'127.0.0.1',9090);  // 绑定电话机
socket_listen($server,5);   // 开机

//定义一个数组
$allSockets = [$server];
while(true){
    $copySockets = $allSockets;
    if(socket_select($copySockets,$write,$except,0) === false){
        exit('error');
    }

    if(in_array($server,$copySockets)){
        $client = socket_accept($server);   //接收客户端连接
        $buf = socket_read($client,8024);   //一次读取数据的长度
        //echo $buf;

        if(preg_match("/Sec-WebSocket-Key: (.*)\r\n/i",$buf,$matches)){
            $key = base64_encode(sha1($matches[1].'258EAFA5-E914-47DA-95CA-C5AB0DC85B11',true));
            $res = 'HTTP/1.1 101 Switching Protocol'.PHP_EOL
                .'Upgrade: Websocket'.PHP_EOL
                .'Connection: Upgrade'.PHP_EOL
                .'WebSoket-Location: ws://127.0.0.1:9090'.PHP_EOL
                .'Sec-WebSocket-Accept:'.$key.PHP_EOL.PHP_EOL;

            //socket回复
            socket_write($client,$res,strlen($res)); //握手成功
            socket_write($client,buildMsg("hello websocket")); //注意此处要双引号

            //把webSocket客户端的socket保存起来
            $allSockets[] = $client;
        }

        //把服务端的socket移除
        $k = array_search($server,$copySockets);
        unset($copySockets[$k]);
   }

    foreach($copySockets as $s){
        $buf = socket_read($s,8024);
        if(strlen($buf) < 9){ //意味着客户端主动关闭了链接
            $k = array_search($s,$allSockets);
            unset($allSockets[$k]); //数组中删除该socket

            //服务端也要关掉
            socket_close($s);
            continue;
        }

        echo getMsg($buf); //获取客户端消息并转码
        echo PHP_EOL;
    }

}

//关机
socket_close($server);



///功能函数//

/**
 * 编码发送给客户端的数据
 * @param $msg要处理的数据内容
 */
function buildMsg($msg){
    $frame = [];
    $frame[0] = '81';
    $len = strlen($msg);
    if($len < 126){
        $frame[1] = $len < 16 ? '0'.dechex($len) : dechex($len);
    }elseif($len < 65025){
        $s = dechex($len);
        $frame[1] = '7e'.str_repeat('0',4-strlen($s)).$s;
    }else{
        $s = dechex($len);
        $frame[1] = '7f'.str_repeat('0',16-strlen($s)).$s;
    }

    $data = '';
    $l = strlen($msg);
    for($i=0;$i<$l;$i++){
        $data .= dechex(ord($msg{$i}));
    }
    $frame[2] = $data;
    $data = implode('',$frame);
    return pack('H*',$data);
}

/**
 * 解析客户端发送过来的数据
 * @param $buffer
 */
function getMsg($buffer){
    $res = '';
    $len = ord($buffer)&127;
    if($len === 126){
        $masks = substr($buffer,4,4);
        $data = substr($buffer,8);
    }elseif($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++){
        $res .= $data[$index]^$masks[$index % 4];
    }

    return $res;
}

重新运行服务端，任何观察服务端控制的打印的信息。
刷新浏览器，服务端控制台打印：

init msg

点击“发送消息”，服务端控制台打印：

hello server #这个是客户端发送的

这样就完成了一个简单的websocket案例

学习笔记666
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Socket IO入门-WebSocket
01-03
Socket IO入门-WebSocket 在本篇文章中，我们将探讨Socket IO入门-WebSocket的相关知识点。 即时通讯简介 即时通讯（Instant Messaging）是一种基于互联网的即时交流消息的业务。它可以分为两种类型：在线push和...
node-red-contrib-home-assistant-websocket:Node-RED与Home Assistant Core的集成
04-28
节点红色贡献家庭辅助websocket 各种节点可使用与通信的来帮助设置自动化。 入门 文档可以在找到。 先决条件 安装并运行Node-RED，如果您需要安装Node-RED，请参见。 v10.0或更高版本 v1.0或更高版本 安装 通过...
Socket学习 - 撕开远程调用的逼格外衣(下)超简易仿制一个RPC客户端
01-11 1013
上节课我们学习了基本的“远程调用”http://blog.csdn.net/github_26672553/article/details/54342485 套路如下： 1、服务端创建socket服务，并监听客户端连接 2、利用HTTP协议和自己“胡乱”的协议内容来约定调用的类 3、服务端执行的结果，通过socket发送给客户端这节课我们要来拓展一下客户端市面上常见的客户端代码 比如服务端
【BFS】HUD-Asteroids
木又可可的博客
03-29 2万+
HUD 1240 Asteroids! Asteroids! You’re in space. You want to get home. There are asteroids. You don’t want to hit them. Input Input to this problem will consist of a (non-empty) series of up to 100 data sets. Each data set will be formatted according to the
WebSocket
i_ViOLeT_i的博客
08-01 194
1、什么是WebSocket？ WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。 如果通过ajax实现双向通信，需要写一个定时器不断请求，即轮询，然后以固定的间隔给服务器发请求，询问服务器有没有新消息。 1）浪费服务器资源，不断地连接和断开请求资源 2）...
socket php建立聊天室,PHP搭建socket聊天室
weixin_36151775的博客
03-28 562
PHP聊天室框架​聊天室需要使用socket来传递信息,在写聊天室之前,我们先来了解下socket.1.什么是socket​套接字(socket)是一个抽象层，应用程序可以通过它发送或接收数据，可对其进行像对文件一样的打开、读写和关闭等操作。套接字允许应用程序将I/O插入到网络中，并与网络中的其他应用程序进行通信。网络套接字是IP地址与端口的组合。​所谓套接字，实际上是一个通信端点，每个套接字都有...
【Exception】Class com.XXX1 can not access a member of class com.XXX2 with modifiers “public“
ooooooooooooooxiaosu的博客
10-12 3478
问题描述 在com.XXX1类中利用反射创建com.XXX2的实例对象，报错：“Class com.XXX1 can not access a member of class com.XXX2 with modifiers "public"”，而现在com.XXX2这个类没有用public修饰，采用默认访问修饰符。 原因分析 com.XXX2这个类不可访问，异常描述的意思是把这个类的访问修饰符改成public。 解决方法 解决思路就是在com.XXX1中可以访问com.XXX2 方法一：用pub
vue-native-websocket:带有vuex集成的本地websocket
05-02
vue-native-websocket· Vuejs 2和Vuex的本地websocket实现安装yarn add vue-native-websocket# ornpm install vue-native-websocket --save用法配置通过URL字符串自动进行套接字连接import VueNativeSock from 'vue...
vue-websocket：Vue.js的简单websocket（socket.io）插件
02-06
npm $ npm install -S vue-websocket手册下载生产文件。 该链接是在该项目的dist目录中找到的同一文件的镜像。用法注册插件。 默认情况下，它将连接到/ ： import VueWebsocket from "vue-websocket" ;Vue . use ( ...
obs-websocket:通过 WebSockets 远程控制 OBS Studio
08-04
obs-websocket OBS Studio 的 WebSockets API。下载部分提供了适用于 Windows、MacOS 和 Linux 的二进制文件。家酿如果您使用的是 MacOS，您也可以使用 Homebrew 进行安装： brew install obs-websocket使用 obs-...
一些BFS题集
c0ldHEart的博客
08-04 587
一些BFS题集 A计划 可怜的公主在一次次被魔王掳走一次次被骑士们救回来之后，而今，不幸的她再一次面临生命的考验。魔王已经发出消息说将在T时刻吃掉公主，因为他听信谣言说吃公主的肉也能长生不老。年迈的国王正是心急如焚，告招天下勇士来拯救公主。不过公主早已习以为常，她深信智勇的骑士LJ肯定能将她救出。  现据密探所报，公主被关在一个两层的迷宫里，迷宫的入口是S（0，0，0），公主的位置用P表示，...
WebSocket菜鸟教程二
weixin_48305373的博客
09-09 3160
在不同的浏览器不同的窗口依然连接成功，函数触发成功。
socket编程(一)使用SOCK_STREAM建立可靠通信
热门推荐
追求游戏之道
04-17 2万+
socket是我们用来进行网络编程的基本API，一般系统都提供了socket，unix以及类unix(Linux、mac)它们都提供了socket，不过不同平台还是有那点区别的，其中Windows区别最大了。本文的代码是在mac上测试通过的。 socket是一个应用层编程API，提供了tcp/ip四层模型的第三层网络层的TCP、UDP协议的数据传输方式。第二层网际层有IP协议，它本来是不可靠的协
WebSocket 详解教程
weixin_33713503的博客
10-30 1086
概述 WebSocket 是什么？ WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 为什么需要 WebSocket ？ 了解计算机网络协议的人，应该都知道：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请...
WebSocket：最简单的实现方式——>初学者。WebSocket注入Service的方法。
weixin_40620337的博客
07-03 9039
使用本方法不需要任何jar包。但是需要引用tomcat，不然无法引用注释@ServerEndpoint  var ws = new WebSocket(url,[protocol]);//url:指定连接的服务器，protocol:可接受的子协议。 var ws = new WebSocket("ws://"+location.host+"/websocket/"+用户ID);//locati...
WebSocket协议介绍与使用
weixin_44184990的博客
01-08 2605
WebSocket协议     WebSocket协议是一种网络通信协议，是HTML5之后提出的一种在单个TCP上进行全双工通讯的协议。可以使服务端主动的向客户端发送消息，常用于推送服务。其特点如下： HTTP协议（1.0）是单向的没有连接状态的协议，客户端浏览器为了获取服务器的动态变化信息，需要配合JavaScript和AJAX进行不断的异步轮询请求，需要不断的建立连接，非常耗费资源。 WebSocket能够使任一方主动的建立起连接，并且连接只要建立一次就一
websocketpp实例
深之JohnChen的专栏
12-03 1万+
//服务端 //WebSocketServerOpreate.h #pragma once #include &lt;boost/algorithm/string.hpp&gt; #include &lt;string&gt; #include &lt;vector&gt; #include &lt;iostream&gt; #include &lt;boost/thread.hpp&gt...
【小白入门】Socket和webSocket入门 这一篇就够了！用php的Socket自己实现简单webSocket服务器！
质疑那些理所当然，才是理所当然！
06-05 1957
这几天研究了下php实现webSocket的方法，网上查了不少博文，涉及到的知识点不少。但却非常值得学，因为这方面典型的应用场景非常的多，消息推送，聊天室，所有需要长连接的地方都会用到它。 当然可能有人会说有Workerman的框架，不用自己实现它，从工作角度来看，没错。 但是，框架封装的东西屏蔽了原生的实现方法，看着是简单，但利于工作却并不...
细说websocket - php篇
weixin_34348174的博客
12-25 365
下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分，这个部分在 node 中可以十分轻松的完成，因为 node 提供的 net 模块已经对 socket 套接字做了封装处理，开发者使用的时候只需要考虑数据的交互而不用处理连接的建立。而 php 没有，从 socket 的连接、建立、绑定、监听等，这些都需要我们自己去操作，所以有必要拿出来再说一说。 ...
js的Socket添加Sec-WebSocket-Protocol
最新发布
05-29
在 JavaScript 中使用 WebSocket 时，可以通过在创建 WebSocket 对象时传递一个选项对象来添加 `Sec-WebSocket-Protocol`。例如： ```javascript const socket = new WebSocket('ws://localhost:8080/', ['protocol...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值