1.什么是websocket？

2.为什么用websocket？

3.怎么用websocket？

4.websocket基于浏览器相关？

4.1支持的浏览器

4.2查看浏览器是否支持websocket

4.3 F12里面的网络信息（Network）

4.4 建立连接测试

4.4.1建立连接失败（无参）

4.4.2 建立连接失败（带参）

4.4.3 建立连接成功

4.4.4 建立连接成功后断开连接

5.websocket的请求头以及响应

6.websocket 基于h5客户端使用的简单例子

注：博客整理不易，转载注明出处。

1.什么是websocket？

解释1：来源于菜鸟教程

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

解释2：来源于博客https://blog.csdn/weixin_40784198/article/details/81811039

Websocket是存在于互联网交互架构应用层的协议，虽然在实际的运用场景中websocket需要http去启动链接，但该依赖关系不是必要的。Websocket连接完全可以独立于http，之所以将连接方式建立在http之上是因为http已经提供了便捷的沟通协议。利用http的协议完成wesocket握手连接可以节省开发独立握手协议的成本。

注：简单的说websocket是一种协议，类似http协议这种。

2.为什么用websocket？

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

http请求要想实时获取服务端的数据就只能不停的发请求去问服务端，只有客户端发起请求后服务端才能响应请求，这样非常浪费资源；而websocket协议，只要建立连接后服务端和客户端就可以随时互相发送消息，不需要客户端频繁的去发起请求。

注：简单的说，就是http协议不支持长连接，而websocket支持长连接。

3.怎么用websocket？

参考菜鸟教程：HTML5 WebSocket | 菜鸟教程

截图如下：

4.websocket基于浏览器相关？

4.1支持的浏览器

目前大部分浏览器支持 WebSocket() 接口，你可以在以下浏览器中尝试实例： Chrome, Mozilla, Opera 和 Safari。

4.2查看浏览器是否支持websocket

通过如下两种方式可以验证浏览器是否支持websocket：

//方式一
 if ("WebSocket" in window){
    //支持websocket
}

//方式二
 if (window.WebSocket) {
    //支持websocket
}

4.3 F12里面的网络信息（Network）

F12（鼠标右键-->检查）信息如下

点击Network（网络请求相关的信息）这一个选项卡：

以上对应的解释如下：

name：发起请求的名称（如上，请求名称是ws）
status：101代表websocket连接成功，其他代表连接失败
type：连接类型，websocket代表websocket请求；xhr代表ajax请求
initiator：代表发起者，也就是调用请求的代码所在的位置
time：请求的响应时间

4.4 建立连接测试

4.4.1建立连接失败（无参）

如下，name是ws，此时是没有带请求参数的：

4.4.2 建立连接失败（带参）

如下，name为ws？token=...，这个是因为该请求带了参数，这些参数用于服务端校验：

4.4.3 建立连接成功

4.4.4 建立连接成功后断开连接

5.websocket的请求头以及响应

如下，和http的请求头很类似的，因为websocket本身就是通过http协议去发送，只是附带了一些特殊头而已

如上请求头的解释：

Connection: Upgrade：表示要升级协议
Upgrade: websocket：表示要升级到 websocket 协议。
Sec-WebSocket-Version: 13：表示 websocket 的版本。如果服务端不支持该版本，需要返回一个 Sec-WebSocket-Versionheader ，里面包含服务端支持的版本号。
Sec-WebSocket-Key：与后面服务端响应首部的 Sec-WebSocket-Accept 是配套的，提供基本的防护，比如恶意的连接，或者无意的连接

服务端返回内容如下，状态代码101表示协议切换。到此完成协议升级，后续的数据交互都按照新的协议来。

6.websocket 基于h5客户端使用的简单例子

例1：

来自菜鸟教程，可以根据如下基本代码进行修改封装


<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>菜鸟教程(runoob)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://136.25.60.143:30326/app-im-websocket/ws?token=123&appCode=aiyx&groups=center1");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

例2：

自己实际项目中测试的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Netty-Websocket</title>
    <style>
        input {
            height: 2em;
            margin-bottom: 1em;
        }
        input[type='text'] {
            width: 20em;
        }
        input[type='button'] {
            width: 10em;
        }

        .message-window{
            width: 50%;
        }

        .message-window input[type='text'],textarea{
            width: 100%;
            margin-bottom: 1em;
        }

        .message-window input[type='button']{
            background: #9ea5a5;
            border: 1px solid #8c9090;
        }

    </style>
</head>
<body>
<form onSubmit="return false;">
    <label>WS：</label>
    <br/>
    <input type="text" id="wsurl" value="ws://127.0.0.1:30326/app-im-websocket/ws?token=123&appCode=testSystem&groups=center1">
    <input type="button" value="建立连接" style="color: red" onclick="createWebSocket()">
    <br/>
    <div class="message-window">
        <label>消息窗口：</label>
        <br/>
        <textarea id="responseText" rows="10"></textarea>
        <br/>
        <input type="text" name="message" placeholder="这里输入消息"/>
        <br/>
        <input type="button" value="发送" onClick="send(this.form.message.value)"/>
    </div>
</form>
<script type="text/javascript">
    var socket;

    if (!window.WebSocket) {
        window.WebSocket = window.MozWebSocket;
    }

    if (!window.WebSocket) {
        alert("您的浏览器不支持WebSocket协议！");
    }

    /**
     * 发送消息
     */
    function send(message) {
	console.log("发送",message);

        if (socket.readyState === WebSocket.OPEN) {
		console.log("发送",message);
            socket.send(message);
        } else {
            alert("WebSocket连接没有建立！");
        }
    }

    /**
     * 创建连接
     */
    function createWebSocket (){
        var wsurl = document.getElementById('wsurl').value;
        console.log(wsurl);

        if (socket != null) {
            if (socket.readyState === WebSocket.OPEN) {
                socket.close();
            }
        }

        if (window.WebSocket) {
		console.log("进入1");
            socket = new WebSocket(wsurl);
            socket.onmessage = function (event) {
		console.log("进入2");
                // 心跳包监听
                if (event.data.length === 6) {
				console.log("长度6",event.data);
                    if (event.data === '0x0000') {
					console.log("心跳",event.data);
                        // 回复心跳
                        socket.send(event.data);
                    }
                }else{//不是心跳数据才处理
                    // 数据处理
					console.log("接收2",event.data);
                    var ta = document.getElementById('responseText');
                    ta.value += event.data + "\r\n";
                }

            };
            socket.onopen = function (event) {
                var ta = document.getElementById('responseText');
                ta.value = "Netty-WebSocket服务器。。。。。。连接 \r\n";
            };
            socket.onclose = function (event) {
                var ta = document.getElementById('responseText');
                ta.value = "Netty-WebSocket服务器。。。。。。关闭 \r\n";
            };
        } else {
            alert("您的浏览器不支持WebSocket协议！");
        }
    }

</script>
</body>
</html>

参考链接：

HTML5 WebSocket | 菜鸟教程

Websocket是什么？_Uncle_Joe的博客-CSDN博客_什么是websocket

https://segmentfault/a/1190000012948613

......

更多推荐

我对websocket的一些理解

我对websocket的一些理解

1.什么是websocket？

2.为什么用websocket？

3.怎么用websocket？

4.websocket基于浏览器相关？

4.1支持的浏览器

4.2查看浏览器是否支持websocket

4.3 F12里面的网络信息（Network）

4.4 建立连接测试

4.4.1建立连接失败（无参）

4.4.2 建立连接失败（带参）

4.4.3 建立连接成功

4.4.4 建立连接成功后断开连接

5.websocket的请求头以及响应

6.websocket 基于h5客户端使用的简单例子

发布评论取消回复

最近发表

热门文章

标签列表

我对websocket的一些理解

1.什么是websocket？

2.为什么用websocket？

3.怎么用websocket？

4.websocket基于浏览器相关？

4.1支持的浏览器

4.2查看浏览器是否支持websocket

4.3 F12里面的网络信息（Network）

4.4 建立连接测试

4.4.1建立连接失败（无参）

4.4.2 建立连接失败（带参）

4.4.3 建立连接成功

4.4.4 建立连接成功后断开连接

5.websocket的请求头以及响应

6.websocket 基于h5客户端使用的简单例子

相关文章

发布评论取消回复

最近发表

热门文章

标签列表