WebSocket详解-01

转载已于 2023-04-12 21:26:41 修改 · 2.2k 阅读

7 ·

CC 4.0 BY-SA版权

原文链接：https://www.runoob.com/html/html5-websocket.html

文章标签：

#websocket #服务器 #网络

于 2021-06-28 14:51:50 首次发布

JavaScript 专栏收录该内容

65 篇文章

订阅专栏

本文介绍了WebSocket协议的基本概念及其优势，详细阐述了如何通过JavaScript创建WebSocket连接并实现双向通信的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

二、详解

一、概述

WebSocket的定义

WebSocket是Html5提供的一种在单个TCP连接上进行双向通信的协议，解决了客户端和服务端之间的实时通信问题。浏览器和服务器只需要完成一次握手，二者之间就可以创建一个持久性的TCP连接，从而实现双向实时通信。

WebSocket的优点

很多网站利用AJAX轮询实现数据推送，轮询是在特定时间间隔，由浏览器主动发起请求，将服务器的数据拉回来。轮询需要不断向服务器发送请求，会占用很多带宽和服务器资源。WebSocket建立TCP连接后，服务器可以主动给客户端推送数据，能够更好的节省带宽和服务器资源，实现更实时的数据通信。

如下右图所示，浏览器通过JS向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务端就可以通过TCP连接直接交换数据。当获取WebSocket连接后，可以通过send()方法来向服务器发送数据，并通过onmessage事件接收服务器返回的数据。

二、详解

创建WebSocket实例

如下代码所示，创建Websocket实例。

// 第一个参数：连接的URL, 必填
// 第二个参数：指定可接受的自协议, 选填
var Socket = new WebSocket(url, [protocol] );

WebSocket属性

如下图所示，为WebSocket对象的属性。

WebSocket事件

如下图所示，为WebSocket对象的相关事件。

WebSocket方法

如下图所示，为Websocket对象的相关方法。

WebSocket实例

WebSocket本质上是一个基于TCP的协议。为了创建一个WebSocket连接，浏览器需要向服务器发起一个HTTP请求，这个请求和普通的HTTP请求不同，它包含了一些附加头信息，服务器解析这些附加头信息后产生的应答信息返回给客户端，客户端和服务端的连接就建立起来了，双方可以通过连接通道自由传递信息，并且这个连接会持续存在，直到客户端或服务端某一方主动关闭连接。

// 申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，
// WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
var ws = new WebSocket("ws://localhost:8080"); 

// 当WebSocket创建成功时，触发onopen事件
ws.onopen = function(){
   console.log("open");
　　ws.send("hello"); //将消息发送到服务端
}
// 当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
ws.onmessage = function(e){
　　console.log(e.data);
}
// 当客户端收到服务端发送的关闭连接请求时，触发onclose事件
ws.onclose = function(e){
　　console.log("close");
}
// 如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
ws.onerror = function(e){
　　console.log(error);
}