zoukankan      html  css  js  c++  java
  • WebSocket简介

    一、什么是WebSocket  

    1.1   WebSocket的概念

      HTTP请求是基于请求响应模式的,客户端永远是主动的一方,这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。我们只能使用 "轮询" :每隔一段时候,就发出一个询问,了解服务器有没有新的信息。轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。WebSocket 最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于 服务器推送技术 的一种。

    1.2  WebSocket的特点

      webSocket主要有以下几个特点:

        (1)建立在 TCP 协议之上,服务器端的实现比较容易。

        (2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。

        (3)数据格式比较轻量,性能开销小,通信高效。

        (4)可以发送文本,也可以发送二进制数据。

        (5)没有同源限制,客户端可以与任意服务器通信。

        (6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

      WebSocket的工作过程:建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTTP 请求不同,包含了一些附加头信息,其中 附加头信息"Upgrade: WebSocket" 表明这是一个申请协议升级的 HTTP 请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket 连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。http和websocket的连接生命周期简图如下:

    二、WebSocket API

    2.1  创建 WebSocket 对象。

    var Socket = new WebSocket(url, [protocol] );

    2.2  WebSocket 的属性

    属性 描述
    Socket.readyState

    只读属性 readyState 表示连接状态:

    • 0 - 连接尚未建立。

    • 1 - 连接已建立,可以进行通信。

    • 2 -连接正在进行关闭。

    • 3 - 连接已经关闭或者连接不能打开。

    Socket.bufferedAmount

    只读属性 bufferedAmount 

    已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。

    2.3  WebSocket 事件

    事件事件处理程序描述
    open Socket.onopen 连接建立时触发
    message Socket.onmessage 客户端接收服务端数据时触发
    error Socket.onerror 通信发生错误时触发
    close Socket.onclose 连接关闭时触发

    2.4  WebSocket 方法

    方法描述
    Socket.send()

    使用连接发送数据

    Socket.close()

    关闭连接 

    三、WebSocket简单使用

            var ws = new WebSocket("ws://localhost:8080");
                    
                   ws.onopen = function()
                   {
                      // Web Socket 已连接上,使用 send() 方法发送数据
                      ws.send("发送数据");
                      alert("数据发送中...");
                   };
                    
                   ws.onmessage = function (evt) 
                   { 
                      var received_msg = evt.data;
                      alert("数据已接收...");
                   };
                    
                   ws.onclose = function()
                   { 
                      // 关闭 websocket
                      alert("连接已关闭..."); 
                   };

    参考文章:

    1、http://www.runoob.com/html/html5-websocket.html

    2、http://www.ruanyifeng.com/blog/2017/05/websocket.html

  • 相关阅读:
    VMware15 安装centos7标准板
    jQuery拼接HTML标签元素
    解决win10 蓝牙设备只能配对无法连接 ,并且删除设备无效的问题
    Linux:系统的基本优化
    nano编辑器的设置
    Linux:网络yum源设置
    MySQL:MySQL的基本操作
    MySQL:MySQL的安装
    Python之路:堡垒机实例以及数据库操作
    paramiko 模块安装
  • 原文地址:https://www.cnblogs.com/wyy1234/p/9149821.html
Copyright © 2011-2022 走看看