当前位置:   article > 正文

WebSocket详解-01_new websocket

new websocket

目录

一、概述

二、详解


一、概述

WebSocket的定义

        WebSocket是Html5提供的一种在单个TCP连接上进行双向通信的协议,解决了客户端和服务端之间的实时通信问题。浏览器和服务器只需要完成一次握手,二者之间就可以创建一个持久性的TCP连接,从而实现双向实时通信。

WebSocket的优点

        很多网站利用AJAX轮询实现数据推送,轮询是在特定时间间隔,由浏览器主动发起请求,将服务器的数据拉回来。轮询需要不断向服务器发送请求,会占用很多带宽和服务器资源。WebSocket建立TCP连接后,服务器可以主动给客户端推送数据,能够更好的节省带宽和服务器资源,实现更实时的数据通信。

        如下右图所示,浏览器通过JS向服务器发出建立WebSocket连接的请求,连接建立以后,客户端和服务端就可以通过TCP连接直接交换数据。当获取WebSocket连接后,可以通过send()方法来向服务器发送数据,并通过onmessage事件接收服务器返回的数据。

二、详解

创建WebSocket实例

        如下代码所示,创建Websocket实例。

  1. // 第一个参数:连接的URL, 必填
  2. // 第二个参数:指定可接受的自协议, 选填
  3. var Socket = new WebSocket(url, [protocol] );

WebSocket属性

         如下图所示,为WebSocket对象的属性。

WebSocket事件

        如下图所示,为WebSocket对象的相关事件。

WebSocket方法

        如下图所示,为Websocket对象的相关方法。

WebSocket实例

        WebSocket本质上是一个基于TCP的协议。为了创建一个WebSocket连接,浏览器需要向服务器发起一个HTTP请求,这个请求和普通的HTTP请求不同,它包含了一些附加头信息,服务器解析这些附加头信息后产生的应答信息返回给客户端,客户端和服务端的连接就建立起来了,双方可以通过连接通道自由传递信息,并且这个连接会持续存在,直到客户端或服务端某一方主动关闭连接。

  1. // 申请一个WebSocket对象,参数是服务端地址,同http协议使用http://开头一样,
  2. // WebSocket协议的url使用ws://开头,另外安全的WebSocket协议使用wss://开头
  3. var ws = new WebSocket("ws://localhost:8080");
  4. // 当WebSocket创建成功时,触发onopen事件
  5. ws.onopen = function(){
  6. console.log("open");
  7.   ws.send("hello"); //将消息发送到服务端
  8. }
  9. // 当客户端收到服务端发来的消息时,触发onmessage事件,参数e.data包含server传递过来的数据
  10. ws.onmessage = function(e){
  11.   console.log(e.data);
  12. }
  13. // 当客户端收到服务端发送的关闭连接请求时,触发onclose事件
  14. ws.onclose = function(e){
  15.   console.log("close");
  16. }
  17. // 如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
  18. ws.onerror = function(e){
  19.   console.log(error);
  20. }
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/877954
推荐阅读
相关标签
  

闽ICP备14008679号