WebSocket建立连接的过程

最新推荐文章于 2025-07-01 10:28:58 发布

原创最新推荐文章于 2025-07-01 10:28:58 发布 · 2.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#websocket

学习总结专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨了实时通讯的三种主要方式：Ajax轮询、Longpull和Websocket。详细解析了它们的工作原理，性能表现及应用场景，尤其强调了Websocket作为一种长连接协议，在实时通讯中的优势。

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

1.实时通讯的方式

1.1 Ajax轮询

异步的方式，是通过ajax+js的方式，每隔一段时间发送一个请求到后端，询问服务器有没有相关的消息或者是数据的更新，如果有就把数据拿到前端进行渲染。但是这种方式是一种死循环，会一直循环下去。ajax是不需要刷新浏览器的，页面上的一些状态更新的操作就需要使用ajax轮询去做。

1.2 Long pull

Long pull的原理和Ajax轮询的方式是差不多的，但是不同的是Long pull是一种阻塞的方式。性能差
这两种方式其实都是向服务器发送请求等待处理，都是被动的。这两种方式的性能都是不怎么好的。

1.3 Websocket

websocket是一种连接协议，是一种长连接，http1.0是一种短连接。服务端和客户端会一直保持着连接。并且服务端会主动的推送消息给客户端。websocket是一种实时化的协议，Http的一个周期是request来界定。也就是说有一个请求发送到服务端，服务端就会做出响应。一个request对应一个response。多个request对应的是多个response。数量是一一对应的。
websocket连接建立之后，服务端就会一直不停的向客户端发送请求。主动的推送消息给客户端。只需要建立一次请求，就会源源不断的推送想要的数据给客户端。除非自己断开连接重新连接。

2.websock连接的过程

首先写一个小demo
（1）先在html界面上构建一个骨架，用于展示发送消息和接收消息的内容。

 <div>发送消息：</div>
 <input type="text" id="msgContent"/>
 <input type="button" value="点击发送" onclick="CHAT.chat()"/>
 <div>接收消息:</div>
 <div id="receiveMsg" style="background-color: gainsboro;"></div>

（2）开始编写建立websocket连接的过程
首先定义一个CHAT对象

window.CHAT = {
	soctet: null,
	init:function() {            //初始化的方法
		//判断当前浏览器是否支持websocket
		if(window.WebSocket) {
			// 进行初始化操作
			CHAT.socket = new WebSocket('ws://localhost:8080/ws');     //创建一个新的WebSocket
			//定义CHAT生命周期函数
			CHAT.socket.onopen = function() {
				console.log('客户端和服务端的连接建立成功');
			}
			CHAT.socket.onmessage = function() {
				 console.log('接收到的消息' + e.data); 
				 var receiveMsg = document.getElementById('receiveMsg');
				 var html = receiveMsg.innerHTML;
				 receiveMsg.innerHTML = html + "<br />" + e.data;
			}
			CHAT.socket.onclose = function() {
				console.log('消息关闭.....');
			}
			CHAT.socket.onerror = function() {
					console.log('消息发生错误');
			}
		}else {
			alert('当前浏览器不支持websocket协议');
		}
	}，
	chat:function() {
		var msg =  document.getElementById("msgContent");
		CHAT.socket.send(msg.value);
	}
}