HTML5 混合APP开发学习笔记（十一）——WebSocet基础

最新推荐文章于 2025-04-03 19:06:36 发布

原创最新推荐文章于 2025-04-03 19:06:36 发布 · 338 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#WebSocet #通信协议

HTML5混合APP 专栏收录该内容

17 篇文章

订阅专栏

传统Ajax轮询实现推送技术浪费带宽资源，HTML5定义的WebSocket协议能节省服务器资源和带宽，实现实时通讯。它建立在TCP之上，是双向通信协议，类似TCP长连接。浏览器通过JavaScript发起请求建立连接，双方可自由传递信息，还介绍了WebSocket对象相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WebSocet基础

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息 “Upgrade: WebSocket” 表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
WebSocket是HTML5一种新的协议，它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯，它建立在TCP之上，同HTTP一样通过TCP来传输数据，但是它和 HTTP 协议最大的不同是：
1. WebSocket 是一种双向通信协议，在建立连接后，WebSocket服务器和浏览器或其它客户端都能主动的向对方发送或接收数据，就像Socket一样；
2. 相对于传统HTTP每次请求和响应都需要客户端与服务端建立连接的模式，WebSocket 是类似Socket的 TCP长连接的通讯模式，一旦WebSocket 连接建立后，后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端断掉连接前，不需要客户端和服务端重新发起连接请求。
3. WebSocket协议可以在现有的Web基础结构下很好地工作，它定义WebSocket连接的生命周期开始于HTTP连接，从而保证了与之前的Web应用程序的兼容性。在经过WebSocket握手后，协议才从HTTP切换到WebSocket。

WebSocket 对象

创建 WebSocket 对象：var Socket = new WebSocket(url, [protocol] );
第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
WebSocket 属性
¹

WebSocket 事件
WebSocket 方法

例：

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>菜鸟教程(runoob.com)</title>
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               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>