websocket html5 api,Html5之高级-14 Web Socket(概述、API、示例)

一、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、示例)