Html5之高级-14 Web Socket(概述API示例)

Posted 2020-07-01

一、Web Socket 概述

Web Socket 简介

    - Web Socket 是 html5 提供的在 Web应用程序中客户端与服务器端之间进行的非 HTTP 的通信机制

    - Web Socket 实现了用 HTTP 不容易实现的服务器端的数据推送等智能通讯技术

Web Socket 的特点

    - Web Socket 可以在服务器与客户端之间建立一个非 HTTP 的双向连接

        - 这个连接时实时的，也是永久的

        - 服务器端可以主动推送消息

        - 服务器端不再需要轮询客户端的请求

        - 服务器端与客户端之间通信无需重新建立连接

二、Web Socket API

Web Socket 对象

    - 调用 WebSocket 对象的构造器来建立与服务器之间的通信连接

      var webSocket = new WebSocket(ws://localhost:8005/socket);

        - URL 字符串必须以"ws"或"wss"(加密通信时)文字作为开头

        - 客户端可以通过 WebSocket这个URL字符串重新获取连接

Web Socket 方法

    - 使用 WebSocket 对象的 send() 方法对服务器发送数据

      webSocket.send("data");

        - send() 方法只能发送文本数据

        - 使用 JSON 对象把任何 javascript 对象转换称文本数据后进行发送

        - 通过 WebSocket 对象 close() 方法来关闭socket，切断通信连接

          webSocket.close();

Web Socket 事件

    - 通过获取 onmessage 事件来接收服务器传来的数据:

    - 通过获取 onopen 事件来监听 socket 的打开事件:

    - 通过获取 onclose 时间来监听 socket 的关闭事件

readyState 属性

    - 通过读取 readyState 的属性值来获取 WebSocket 对象的状态

    - readyState 属性存在以下几种属性值:

        - CONNECTING (数字值为0)，表示正在连接

        - OPEN(数字值为1)，表示已建立连接

        - CLOSING(数字值为2)，表示正在关闭连接

        - CLOSED(数字值为2)，表示已关闭连接

三、Web Socket 示例

Web Socket 示例概述

    - 在服务器端指定使用的 socket 应用程序，并在服务器端指定该socket应用程序的主机与端口

    - 编写在客户端使用的 Web Socket 实现与服务器端进行连接并接收发

Web Socket 示例代码

    - Web Socket 客户端页面关键代码

    - Web Socket 客户端 JavaScript关键代码,connect()方法

    - Web Socket 客户端 JavaScript 关键代码，send()方法

    - Web Socket 客户端 JavaScript 关键代码，disconnect()方法

总结：本章内容主要介绍了下 HTML5 Web Socket(概述、API、示例)

本文出自 “技术交流” 博客，谢绝转载！