WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

WebSocket 属性

属性 描述
Socket.readyState

只读属性 readyState 表示连接状态,可以是以下值:

  • 0 - 表示连接尚未建立。

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

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

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

Socket.bufferedAmount

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


WebSocket 事件

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

WebSocket 方法

方法 描述
Socket.send()

使用连接发送数据

Socket.close()

关闭连接

安装 pywebsocket

在执行以上程序前,我们需要创建一个支持 WebSocket 的服务。从 pywebsocket 下载 mod_pywebsocket ,或者使用 git 命令下载:

git clone https://github.com/google/pywebsocket.git

mod_pywebsocket 需要 python 环境支持

mod_pywebsocket 是一个 Apache HTTP 的 Web Socket扩展,安装步骤如下:

  • 解压下载的文件。

  • 进入 pywebsocket 目录。

  • 执行命令:

    $ python setup.py build
    $ sudo python setup.py install
  • 查看文档说明:

    $ pydoc mod_pywebsocket

开启服务

在 pywebsocket/mod_pywebsocket 目录下执行以下命令:

$ sudo python standalone.py -p 9998 -w ../example/

以上命令会开启一个端口号为 9998 的服务,使用 -w 来设置处理程序 echo_wsh.py 所在的目录。

现在我们可以在 Chrome 浏览器打开前面创建的 runoob_websocket.html 文件。如果你的浏览器支持 WebSocket(), 点击"运行 WebSocket",你就可以看到整个流程各个步骤弹出的窗口,流程 Gif 演示

HTML5学习笔记(七)WebSocket的更多相关文章

  1. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  2. (转)Qt Model/View 学习笔记 (七)——Delegate类

    Qt Model/View 学习笔记 (七) Delegate  类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...

  3. Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

  4. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  5. python3.4学习笔记(七) 学习网站博客推荐

    python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...

  6. Go语言学习笔记七: 函数

    Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...

  7. iOS 学习笔记七 【博爱手把手教你使用2016年gitHub Mac客户端】

    iOS 学习笔记七 [博爱手把手教你使用gitHub客户端] 第一步:首先下载git客户端 链接:https://desktop.github.com 第二步:fork 大神的代码[这里以我的代码为例 ...

  8. 【opencv学习笔记七】访问图像中的像素与图像亮度对比度调整

    今天我们来看一下如何访问图像的像素,以及如何改变图像的亮度与对比度. 在之前我们先来看一下图像矩阵数据的排列方式.我们以一个简单的矩阵来说明: 对单通道图像排列如下: 对于双通道图像排列如下: 那么对 ...

  9. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Linux学习笔记(七) 查询系统

    1.查看命令 (1)man 可以使用 man 命令名称 命令查看某个命令的详细用法,其显示的内容如下: NAME:命令名称 SYNOPSIS:语法 DESCRIPTION:说明 OPTIONS:选项 ...

随机推荐

  1. Struts2的使用

    Struts2的核心类库 名称 说明 Struts2-core-2.3.4.jar 核心类库 Xwork-core-2.3.4.jar Xwork的核心类库 Ognl-3.0.5.jar Ognl表达 ...

  2. jquery的ajax(err)

    load()方法 load()方法是jquery中最为简单和常用的ajax方法. 直接使用ajax技术的流程 1.创建xmlhttprequest对象 2.调用open函数("提交方式&qu ...

  3. HDU 6231 (K-th Number)

    题目链接:https://cn.vjudge.net/problem/HDU-6231 思路:二分+双指针: #include <stdio.h> #include <iostrea ...

  4. 7_DoubleBuffer 游戏编程中的双缓存模式

    ### double buffer 双缓存 简单说: 当一个缓存被读取的时候,往另一个缓存里写入, 如此交替 #### the pattern 有两个缓存实例,一个是 current buffer, ...

  5. 【二叉查找树】01不同的二叉查找树的个数【Unique Binary Search Trees】

    当数组为1,2,3,4,...,n时,基于以下原则构建的BST树具有唯一性: 以i为根节点的树,其左子树由[1,i-1]构成,其右子树由[i+1, n]构成. 我们假定f(i)为以[1,i]能产生的U ...

  6. 文件系统(node.js学习笔记)

    根据nodejs菜鸟教程整理. 官方API文档:nodeJS文件系统API 其他整理:nodejs File System 文件系统操作函数分类 1.引用: 导入文件系统模块(fs)语句:var fs ...

  7. 【ML】关于神经网络优化问题的随笔记

    1. 为什么不去试着最大化正确分类的图像数量而使用二次代价函数? 在神经网络中,被正确分类的图像数量所关于权重和偏置的函数并不是一个平滑的函数.大多数情况下,对权重和偏执做出的微小变动完全不会影响被正 ...

  8. Undefined exploded archive location(在myeclipse中TOMCAT不能发布程序。)

    原因:          在工程转移过程中,导致工程的配置文件出错: 解决方法:          1.在工程目录下的.mymetadata文件中可能webrootdir被改无效了(把下面内容拷到你的 ...

  9. 一:ORM关系对象映射(Object Relational Mapping,简称ORM)

    狼来的日子里! 奋发博取 10)django-ORM(创建,字段类型,字段参数) 一:ORM关系对象映射(Object Relational Mapping,简称ORM) ORM分两种: DB fir ...

  10. Javascript:必须知道的Javascript知识点之“单线程事件驱动”

    heiboard: Javascript:必须知道的Javascript知识点之“单线程事件驱动”