WebSocket学习笔记

最新推荐文章于 2023-01-05 15:28:00 发布

十九万里

最新推荐文章于 2023-01-05 15:28:00 发布

阅读量413

点赞数 1

分类专栏：服务器文章标签： websocket socket

本文链接：https://blog.csdn.net/weixin_44865458/article/details/117929356

版权

服务器专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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.");
};

十九万里

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
WebSocket学习笔记

WebSocket与http一样，也是一种网络传输协议那么有http协议了为什么还需要webSocket呢两者区别：HTTP中，通信只能由客户端向服务端发起请求WebSocket，通信既可以从服务端发起请求，也能从客户端发起请求。两者一比较，优势就显示出来了如果服务端的状态是连续变化的，比如天气实时变化，在HTTP协议中，服务端不能主动向客户端发起请求，只能由客户端每隔一段时间定时向服务端请求数据，这样就造成了资源的浪费和动态数据的延迟性，...
复制链接

扫一扫