zoukankan      html  css  js  c++  java
  • WebSockets

    WebSocket 是为了在一个单独的持久连接上提供全双工的双向通信。有关WebSocket API的内容可以参考这里

    这里简单说明下WebSocket在javascript中的用法。

    1 WebSocket连接简述

    在JavaScript中创建了WebSocket 后,会有一个HTTP请求发送到浏览器发起连接。在取得服务器响应后,建立的连接会从HTTP协议交换为WebSocket协议。所以需要后台web服务器也支持WebSocket才能正常通信。

    2 WebSocket API

    2.1 实例化WebSocket

    创建WebSocket,要先实例化一个WebSocket对象,如下:

    var socket = new WebSocket('ws://game.example.com:12010/updates');

    实例化的时候需要传入要连接的URL以及其他参数。注意到这里URL连接使用的是自定义的协议'ws://'而并非'http://'。如果是加密连接的话,则使用'wss://'。传入的URL也需要是绝对URL。

    使用自定义协议的好处

    使用自定义协议(ws,wss)而非HTTP协议的好处是,能够在客户端和服务器之间发送非常少量的数据。由于传递的数据包很小,因此WebSocket很适合移动应用。

    2.2 WebSocket的readyState属性.

    用来表示连接的状态.

    CONNECTING (numeric value 0) //正在连接
        The connection has not yet been established.
    OPEN (numeric value 1) //已经连接
        The WebSocket connection is established and communication is possible.
    CLOSING (numeric value 2)  //正在关闭
        The connection is going through the closing handshake, or the close() method has been invoked.
    CLOSED (numeric value 3)  //已关闭
        The connection has been closed or could not be opened.

    2.3 发送和接收数据

    WebSocket打开之后,就可以通过连接发送和接收数据.使用send()方法向服务器发送数据.

    var socket = new WebSocket('ws://game.example.com:12010/updates');
    socket.send("this is a demo");

    对于有复杂的数据结构的消息(比如dict),发送之前要进行JSON的序列化。

    var message = {
       time: new Date(),
       text: "Hello world!",
       clientID: "xxxxx"      
    };
    socket.send(JSON.stringify(message));

    当服务器向客户端发来消息时,WebSocket对象会触发message事件。返回的数据保存在event.data中。

    socket.onmessage = function(event){
         var data = event.data;
         //...  
    }


    WebSocket的其他事件。

    open: 在成功建立连接时触发。

    error: 在发生错误时触发,连接不能持续。

    close: 在连接关闭时触发。

    2.4 关闭WebSocket连接

    使用close()方法可以关闭WebSocket连接。

    socket.close()

    调用之后readyState指变为2,连接关闭后变为3.

  • 相关阅读:
    决策表快速排序
    书摘
    读书笔记
    echarts x y轴设置
    echarts图类型设置
    echarts入门
    jqgride实现多选
    jqgride实现每一行的单选
    Mac react环境搭建
    两列布局,三列布局
  • 原文地址:https://www.cnblogs.com/cedrelaliu/p/5956735.html
Copyright © 2011-2022 走看看