一步一步学WebSocket (一) 初识WebSocket

时间 2019-11-19 标签一步 websocket

　　众所周知，Http协议是无状态的，而且是基于Request/Response的方式与服务器进行交互，也就是咱们常说的单工模式。可是随着互联网的发展，浏览器与服务端进行双向通讯需求的增长，长轮询向服务器以获取最新数据并实现推送效果的方式已经愈来愈不能知足咱们。Html5标准的制定，也为咱们提供了浏览器与服务端的双工通讯协议WebSocket。javascript

　　WebSocket协议的格式为 "ws://IP:Port" 或者“wss://IP:Port"。其中wss表示进行加密传输的websocket协议。html

　　WebSocket协议与传统的Socket协议同样，都须要进行“握手”。可是WebSocket的“握手”阶段是经过Http协议进行的，“握手”行为经过Request/Response的Header完成，只须要交换不多的数据，即可以建立基于TCP/IP协议的双工通道。下面咱们来看一下Fiddler截取到的WebSocket握手请求java

　　经过Fiddler咱们能够看到，在握手请求时，客户端向服务端发送了一个Get请求，而且在请求的头中增长了这么几个Keyweb

　　Origin:http://IP:Port 表示客户端的地址浏览器

　　Connection:Upgrade / Upgrade:WebSocket 表示本次请求是要进行WebSocket的握手动做服务器

　　Sec-WebSocket-Version: 13 表示浏览器支持的WebSocket版本信息websocket

　　Sec-WebSocket-Key: 这是一个由客户端随机生成的字符串框架

　　在服务器响应的握手信息中Sec-WebSocket-Accept:的值为服务器经过客户端Header的Sec-WebSocket-Key的值进行计算并加密的结果。socket

　　而且服务器的响应状态为101 表示服务器端已经理解了客户端的需求，而且客户端须要根据Upgrade中的协议类型，切换为新的协议来完成后续的通讯。ide

　　这时候咱们的TCP/IP双工通道就已经创建了，WebSocket协议就这么简单。

　　说完理论知识了，咱们来看如何在浏览器中使用WebSocket协议。

　　最新的FireFox、Chrome、IE10及以上版本都已经支持了WebSocket协议。可是在使用它时，咱们须要先检测浏览器是否支持WebSocket协议

　　WebSocket对象位于 window对象下。咱们能够经过如下代码检测浏览器对WebSocket的支持

if("WebSocket" in window)

if(window.WebSocket)

if("MozWebSocket" in window)

if(window.MozWebSocket)

View Code

　　若是咱们的浏览器支持WebSocket 那么咱们就能够建立WebSocket的实例了。

var ws=new WebSocket("ws://localhost:2012");

var ws=new MozWebSocket("ws://localhost:2012);

View Code

　　这里须要注意一下，当咱们建立WebSocket的实例时，这个WebSocket实例就已经开始向服务器发起握手请求了，不须要咱们手动打开链接。

　　WebSocket对象也很简单，咱们会经常使用到它的4个回调方法 onopen onclose onerror onmessage。他们触发的实际分别为握手完成并建立TCP/IP通道后，断开链接后，发生错误时，接收到服务端消息时。

　　另外咱们还经常用到一个属性 readyState 用以检查链接状态，和一个函数 send() 向服务端发送数据。

　　下面咱们来完成一个完整的浏览器使用WebSocket的例子，这里须要服务端也支持WebSocket协议

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebSocket示例</title>
    <script type="text/javascript">
        var ws;//WebSocket对象
        var wsUrl = "ws://localhost:2012";//支持WebSocket协议的服务器端地址

        function connection() {
            //判断该使用哪一种WebSocket对象 
            if ("WebSocket" in window) {
                ws = new WebSocket(wsUrl);
            }
            else if ("MozWebSocket" in window) {
                ws = new MozWebSocket(wsUrl);
            } else {
                alert("当前浏览器不支持WebSocket");

            }

            //注册各种回调
            ws.onopen = function () {
                alert("链接服务器成功");
            }

            ws.onclose = function () {
                alert("与服务器断开链接");
            }
            ws.onerror = function () {
                alert("数据传输发生错误");
            }
            ws.onmessage = function (receiveMsg) {
                alert(receiveMsg.data);
            }
        }
        function sendMessage() {
            //尝试向服务端发送消息

            ws.send("Hello World");

        }

    </script>
</head>
<body>
    <input type="button" value="Connection" onclick="connection()" />
    <input type="button" value="Send" onclick="sendMessage()" />
</body>
</html>

View Code

　　完整示例代码在这里下载示例代码的服务端是基于.Net Framework 4.5用VS2012开发的由于服务器WebSocket框架的.NET 4.0版本有问题……

　　下一篇文章咱们会讲如何使用SuperWebSocket框架搭建咱们本身的WebSocket服务器