阅读 60

WebSocket学习笔记

WebSocket与http一样,也是一种网络传输协议

那么有http协议了为什么还需要webSocket呢
两者区别:

HTTP中,通信只能由客户端向服务端发起请求
WebSocket,通信既可以从服务端发起请求,也能从客户端发起请求。

两者一比较,优势就显示出来了
如果服务端的状态是连续变化的,比如天气实时变化,在HTTP协议中,服务端不能主动向客户端发起请求,只能由客户端每隔一段时间定时向服务端请求数据,这样就造成了资源的浪费和动态数据的延迟性,

知道为什么要用他之后,下面我们就来学习WebSocket的基础知识和用法

1、webSocket简介

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
允许服务端主动向客户端推送数据,浏览器和服务器只需要一次握手,两者之间就直接可以创建持久性的连接,进行双向数据传输

传统的方式是用Ajax轮询,就是在特定的时间间隔 浏览器向服务器发送请求,这样明显浪费资源

在这里插入图片描述

浏览器发起WebSocket连接请求之后,连接建立起来之后,服务端和客户端就可以通过TCP连接直接交换数据
连接之后 通过send()方法发送数据
通过onmessage事件来接受服务器返回的数据

WebSocket.onmessage: 客户端接收到服务端数据的回调(注这里接受的文件可能是文本也可能是二进制对象)二进制数据(blob对象或Arraybuffer对象)

创建一个websocket对象

ws.onmessage = function(event) {
  var data = event.data;
  // 处理数据
};

ws.addEventListener("message", function(event) {
  var data = event.data;
  // 处理数据
});
复制代码

第一个参数是url 指定连接的URL 第二个protocol可选参数,指定了可接受的子协议 注:这里的URL是绝对路径

2、webSocket属性方法

1、WebSocket.onopen: 连接成功后的回调


ws.onopen = function () {
  ws.send('Hello Server!');
}
//指定多个回调函数时:
ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});
复制代码

2、WebSocket.onclose: 连接关闭后的回调

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
};

ws.addEventListener("close", function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
});
复制代码

3、WebSocket.onerror: 连接失败后的回调

socket.onerror = function(event) {
  // handle error event
};

socket.addEventListener("error", function(event) {
  // handle error event
});
复制代码

4、webSocket.bufferedAmount: 未发送至服务器的二进制字节数,可以用来判断发送是否结束

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
  // 发送完毕
} else {
  // 发送还没结束
}
复制代码

5、 WebSocket.binaryType: 使用二进制的数据类型连接

6、WebSocket.protocol : 服务器选择的下属协议

7、WebSocket.url : WebSocket 的绝对路径

8、WebSocket.readyState: 当前连接状态,对应的四个常量

WebSocket.CONNECTING: 0
WebSocket.OPEN: 1
WebSocket.CLOSING: 2
WebSocket.CLOSED: 3

方法:

WebSocket.close() 关闭当前连接
WebSocket.send(data) 向服务器发送数据

这里借用了菜鸟教程的代码方便理解:

<!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>
复制代码

在上面的例子中先对浏览器是否支持websocket做出判断,然后
创建一个websocket实例 随后调用onopen onmessage onclose 方法进行使用

3、WebSocket特点

1、通信可以由客户端和服务端双向发送
2、建立在TCP链接之上,服务端比较容易实现
3、与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器
4、数据格式比较轻量,性能开销小,通信高效。
5、可以发送文本,也可以发送二进制数据
6、没有同源限制,客户端可以与任意服务器通信
7、协议标识符是ws(如果加密,则为wss),服务器网址就是 URL

一个简单的WebSocket例子


var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};   
复制代码
文章分类
前端
文章标签