目录

HTML5 原生 WebSocket

创建 WebSocket 对象

WebSocket 属性

WebSocket 事件

WebSocket 方法

webSocket 前端演示

HTML5 原生 WebSocket

1、WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

2、WebSocket 使得客户端和服务器之间的数据交换变得更加简单&＃xff0c;允许服务端主动向客户端推送数据。

3、WebSocket 中&＃xff0c;浏览器和服务器只需要完成一次握手&＃xff0c;两者之间就直接可以创建持久性的连接&＃xff0c;并进行双向数据传输。

4、很多网站为了实现推送技术&＃xff0c;所用的技术都是 Ajax 轮询&＃xff0c;轮询是在特定的的时间间隔&＃xff08;如每1秒&＃xff09;&＃xff0c;由浏览器对服务器发出HTTP请求&＃xff0c;然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点&＃xff0c;即浏览器需要不断的向服务器发出请求&＃xff0c;然而HTTP请求可能包含较长的头部&＃xff0c;其中真正有效的数据可能只是很小的一部分&＃xff0c;显然这样会浪费很多的带宽等资源。

5、HTML5 定义的 WebSocket 协议&＃xff0c;能更好的节省服务器资源和带宽&＃xff0c;并且能够更实时地进行通讯。

6、浏览器通过 Javascript 向服务器发出建立 WebSocket 连接的请求&＃xff0c;连接建立以后&＃xff0c;客户端和服务器端就可以通过 TCP 连接直接交换数据。

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

创建 WebSocket 对象

1、var Socket &＃61; new WebSocket(url, [protocol] );

1&＃xff09;url&＃xff1a;指定连接的 webSocket 服务器 URL
2&＃xff09;protocol&＃xff1a;可选的&＃xff0c;指定了可接受的子协议
3&＃xff09;示例&＃xff1a;var Socket &＃61; new Socket("ws://192.168.1.20/coco/socket/shake.action);
    前缀 "ws://" 表示连接协议&＃xff0c;如同 http:// 道理一样
    192.168.1.20&＃xff1a;webSocket 服务器所在的主机 ip&＃xff0c;也可以是域名
    coco&＃xff1a;web 应用的上下文路径
    socket/shake.action&＃xff1a;web应用的后台访问地址
    new WebSocket 创建对象的同时就会发起连接&＃xff0c;如果失败&＃xff0c;则浏览器控制台报错。

2、WebSocket 协议本质上是一个基于 TCP 的协议。

3、为了建立一个 WebSocket 连接&＃xff0c;客户端浏览器首先要向服务器发起一个 HTTP 请求&＃xff0c;这个请求和通常的 HTTP 请求不同&＃xff0c;包含了一些附加头信息&＃xff0c;其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求&＃xff0c;服务器端解析这些附加的头信息然后产生应答信息返回给客户端&＃xff0c;客户端和服务器端的 WebSocket 连接就建立起来了&＃xff0c;双方就可以通过这个连接通道自由的传递信息&＃xff0c;并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

WebSocket 属性

1、以下是 WebSocket 对象的属性&＃xff0c;假定使用了以上代码创建了 Socket 对象&＃xff1a;

WebSocket 事件

1、以下是 WebSocket 对象的相关事件&＃xff0c;假定使用了以上代码创建了 Socket 对象&＃xff1a;

WebSocket 方法

1、以下是 WebSocket 对象的相关方法&＃xff0c;假定使用了以上代码创建了 Socket 对象&＃xff1a;

webSocket 前端演示

1、webSocket 的服务器代码不进行展示&＃xff0c;Java 开发人员可以使用 JDK 自带的 webSocket API 或者使用 Spring 提供的 API。

2、浏览器客户端代码示例如下&＃xff1a;

浏览器客户端信息如下&＃xff1a;

可参考&＃xff1a;SpringBoot 2.1.0 整合 Tomcat WebSocket 通信&＃xff1a;https://wangmaoxiong.blog.csdn.net/article/details/84582904