WebSocket的简单介绍及应用

最新推荐文章于 2021-05-12 14:41:45 发布

weixin_33691817

最新推荐文章于 2021-05-12 14:41:45 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

文章标签：网络 json php

原文链接：https://my.oschina.net/beihai2014/blog/651089

本文详细介绍了WebSocket协议，探讨了其如何解决传统HTTP请求中的不足，通过示例展示了如何在客户端和服务端实现WebSocket通信。

2019独角兽企业重金招聘Python工程师标准>>>

‍

web开发中可能遇到这样的场景：网页里的某一块区域里写了一些内容，但这些内容不是固定的，即使看网页的人没有做任何操作，它们也会随时间不断变化。

　　对此，一般的做法是用setTimeout()或setInverval()定时执行任务，任务内容是Ajax访问一次服务器，并在成功拿到返回数据后去更新页面。

　　这种定时刷新的做法会有这样一些感觉不足的地方：

　　频繁的定时网络请求对浏览器(客户端)和服务器来说都是一种负担，尤其是当网页里有多个定时刷新区域的时候。
　　某几次的定时任务可能是不必要的，因为服务器可能并没有新数据，还是返回了和上一次一样的内容。
　　页面内容可能不够新，因为服务器可能刚更新了数据，但下一轮定时任务还没有开始。

　　造成这些不足的原因归结起来，主要还是由于服务器的响应总是被动的。HTTP协议限制了一次通信总是由客户端发起请求，再由服务器端来返回响应。

　　因此，如果让服务器端也可以主动发送信息到客户端，就可以很大程度改进这些不足。WebSocket就是一个实现这种双向通信的新协议。

　　WebSocket是基于HTTP的功能追加协议

　　WebSocket最初由html5提出，但现在已经发展为一个独立的协议标准。WebSocket可以分为协议(Protocol)和API两部分，分别由IETF和W3C制定了标准。

　　先来看看WebSocket协议的建立过程。

　　为了实现WebSocket通信，首先需要客户端发起一次普通HTTP请求(也就是说，WebSocket的建立是依赖HTTP的)。请求报文可能像这样：

 
     1GET ws://websocket.example.com/ HTTP/1.1

     2Host: websocket.example.com

     3Upgrade: websocket

     4Connection: Upgrade

     5Origin: http://example.com

     6Sec-WebSocket-Key:pAloKxsGSHtpIHrJdWLvzQ==

     7Sec-WebSocket-Version:13

　　其中HTTP头部字段Upgrade: websocket和Connection: Upgrade很重要，告诉服务器通信协议将发生改变，转为WebSocket协议。支持WebSocket的服务器端在确认以上请求后，应返回状态码为101 Switching Protocols的响应：

 
     1HTTP/1.1 101 Switching Protocols

     2Upgrade: websocket

     3Connection: Upgrade

     4Sec-WebSocket-Accept: nRu4KAPUPjjWYrnzxDVeqOxCvlM=

　　其中字段Sec-WebSocket-Accept是由服务器对前面客户端发送的Sec-WebSocket-Key进行确认和加密后的结果，相当于一次验证，以帮助客户端确信对方是真实可用的WebSocket服务器。

　　验证通过后，这个握手响应就确立了WebSocket连接，此后，服务器端就可以主动发信息给客户端了。此时的状态比较像服务器端和客户端接通了电话，无论是谁有什么信息想告诉对方，开口就好了。

　　一旦建立了WebSocket连接，此后的通信就不再使用HTTP了，改为使用WebSocket独立的数据帧(这个帧有办法看到，见后文)。

　　整个过程像这样：

　　简单的应用示例

　　应用WebSocket有这样几件事要做：

　　选用支持WebSocket的浏览器。
　　网页内添加创建WebSocket的代码。
　　服务器端添加使用WebSocket通信的代码。

　　服务器端

　　以Node的服务器为例，我们使用ws这个组件，这样搭建一个支持WebSocket的服务器端：

 
     01request("http://uinames.com/api?region=china",

     02        function(error, response, body) {

     03            if (!error && response.statusCode === 200) {

     04                var jsonObject = JSON.parse(body),

     05                    guest = jsonObject.name + jsonObject.surname,

     06                    guestInfo = {

     07                        guest: guest,

     08                        time: dateFormat(new Date(), "HH:MM:ss")

     09                    };

     10 

     11                if (ws.readyState === WebSocket.OPEN) {

     12 

     13                    // 发，送

     14                    ws.send(JSON.stringify(guestInfo));

     15 

     16                    // 用随机来“装”得更像不定时推送一些

     17                    setTimeout(function() {

     18                        sendGuestInfo(ws);

     19                    }, (Math.random() * 5 + 3) * 1000);

     20                }

     21            }

     22        });

     23}

　　这个例子使用了姓名生成站点uinames的API服务，来生成{guest: "人名", time:"15:26:01"}这样的数据。函数sendGuestInfo()会不定时执行，并把包含姓名和时间的信息通过send()方法发送给客户端。另外，注意send()方法需要以字符串形式来发送json数据。

　　这就像是服务器自己在做一些事，然后在需要的时候会通知客户端一些信息。

　　客户端

　　客户端我们使用原生javascript来完成(仅支持WebSocket的浏览器)：

 
     01var socket = new WebSocket("ws://localhost:8080/guest");

     02 

     03socket.onopen = function(openEvent) {

     04    console.log("WebSocket conntected.");

     05};

     06 

     07socket.onmessage = function(messageEvent) {

     08    var data = messageEvent.data,

     09        dataObject = JSON.parse(data);

     10    console.log("Guest at " + dataObject.time + ": " + dataObject.guest);

     11};

     12 

     13socket.onerror = function(errorEvent) {

     14    console.log("WebSocket error: ", errorEvent);

     15};

     16 

     17socket.onclose = function(closeEvent) {

     18    console.log("WebSocket closed.");

     19};

　　WebSocket的URL格式是ws://与wss://。因此，需要注意下URL地址的写法，这也包括注意WebSocket服务器端的路径(如这里的/guest)等信息。因为是本地的示例所以这里是localhost。

　　客户端代码的流程很简单：创建WebSocket对象，然后指定onopen、onmessage等事件的回调即可。其中onmessage是客户端与服务器端通过WebSocket通信的关键事件，想要在收到服务器通知后做点什么，写在onmessage事件的回调函数里就好了。

　　效果及分析

　　通过node server(假定服务器端的文件名为server.js)启动WebSocket服务器后，用浏览器打开一个引入了前面客户端代码的html(直接文件路径file:///就可以)，就可以得到像这样的结果：

　　联系前面客户端的代码可以想到，实际从创建WebSocket对象的语句开始，连接请求就会发送，并很快建立起WebSocket连接(不出错误的话)，此后就可以收到来自服务器端的通知。如果此时客户端还想再告诉服务器点什么，这样做：

`1`	`socket.send("Hello, server!");`

　　服务器就可以收到：

　　当然，这也是因为前面服务器端的代码内同样设置了message事件的回调。在这个客户端和服务器都是javascript的例子中，无论是服务器端还是客户端，都用send()发送信息，都通过message事件设置回调，形式上可以说非常一致。

　　其他可用的数据类型

　　WebSocket的send()可以发送的消息，除了前面用的字符串类型之外，还有两种可用，它们是Blob和ArrayBuffer。

　　它们都代表二进制数据，可用于原始文件数据的发送。比如，这是一个发送Blob类型数据以完成向服务器上传图片的例子：

 
     1var fileEl = document.getElementById("image_upload");

     2var file = fileEl.files[0];

     3socket.send(file);

　　然后服务器端可以这样把文件保存下来：

 
     01var fs = require("fs");

     02 

     03wss.on("connection", function(ws) {

     04    ws.on("message", function(message) {

     05        fs.writeFile("upload.png", message, "binary", function(error) {

     06            if (!error) {

     07                console.log("File saved.");

     08            }

     09        });

     10    });

     11});

　　在客户端接收二进制数据时，需注意WebSocket对象有一个属性binaryType，初始值为"blob"。因此，如果接收的二进制数据是ArrayBuffer，应在接收之前这样做：

`1`	`socket.binaryType =` `"arraybuffer";`

　　其他WebSocket服务器端

　　其他语言来做WebSocket服务器是怎样的呢?下面是一个php的WebSocket服务器的例子(使用Ratchet)：

 
     01<!--?php

     02use Ratchet\ConnectionInterface;

     03use Ratchet\MessageComponentInterface;

     04 

     05require __DIR__ . '/vendor/autoload.php';

     06 

     07class GuestServer implements MessageComponentInterface {

     08 

     09    public function onOpen(ConnectionInterface $conn) {

     10        $conn--->send('The server is listening to you now.');

     11    }

     12 

     13    public function onMessage(ConnectionInterface $conn, $msg) {

     14        $conn->send($this->generateGuestInfo());

     15    }

     16 

     17    public function onClose(ConnectionInterface $conn) {

     18    }

     19 

     20    public function onError(ConnectionInterface $conn, \Exception $e) {

     21        $conn->close();

     22    }

     23 

     24    private function generateGuestInfo() {

     25        $jsonString = file_get_contents('http://uinames.com/api?region=china');

     26        $jsonObject = json_decode($jsonString, true);

     27        $guest = $jsonObject['name'] . $jsonObject['surname'];

     28        $guestInfo = array(

     29            'guest' => $guest,

     30            'time' => date('H:i:s', time()),

     31        );

     32 

     33        return json_encode($guestInfo);

     34    }

     35}

     36 

     37$app = new Ratchet\App('localhost', 8080);

     38$app->route('/guest', new GuestServer(), array('*'));

     39$app->run();

     40?>