HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI

2020-06-15 06:59:35

文档目录

我的书签

请登录

HTML5 WebSocket 使用方法和步骤

WebSocket 协议本质上是一个基于 TCP协议的应用层协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中包含的附加头信息："Upgrade: WebSocket"，表明这是一个申请协议升级为WebSocket 的 HTTP 请求，服务器端解析这些附加的头信息然后产生响应信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接，如下为具体的使用步骤：

在服务端搭建支持WebSocket协议的服务来解析和处理WebSocket请求（这个操作需要一个后端程序员或者了解后端开发的人来完成，前端开发人员没有可不必了解），比如：PHP语言环境使用 Workerman、Swoole等，Python语言环境使用 pywebsocket（是一个 Apache HTTP 的 Web Socket扩展）等

客户端实现检测浏览器对WebSocket的支持：

if ("WebSocket" in window)  {
    alert("您的浏览器支持 WebSocket!");
}  else  {
    // 浏览器不支持 WebSocket
    alert("您的浏览器不支持 WebSocket!");
    return;
}

创建WebSocket对象来打开和服务端的通信通道：
```
var ws = new WebSocket("ws://localhost:9998/echo");
```
Websocket 使用 ws 或 wss 的统一资源标志符，类似于 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。如：
```
ws://example.com/wsapi
wss://secure.example.com/
```
Websocket 使用和 HTTP 相同的 TCP 端口，可以绕过大多数防火墙的限制。默认情况下，Websocket 协议使用 80 端口；运行在 TLS 之上时，默认使用 443 端口。

实现WebSocket对象的回调方法来实现和服务器的数据传输处理：

ws.onopen = function()  {
    // Web Socket 已连接上，使用 send() 方法发送数据
    ws.send("发送数据");
    alert("数据发送中...");
};

ws.onmessage = function (evt)  {
    var received_msg = evt.data;
    alert("数据已接收...");
};

ws.onclose = function()  {
    // 关闭 websocket
    alert("连接已关闭...");
};

作者文档