一、介绍
1.1 基础概念介绍
- 单工通信:数据传输只允许在一个方向上传输,只能一方发送数据,另一方接收数据并发送。
- 半双工:数据传输允许两个方向上的传输,但在同一时间内,只可以有一方发送或接收数据。
- 全双工:同时可进行双向数据传输。
1.2 WebSocket介绍
WebSocket是一种在单个TCP连接上进行全双工通信的协议,它能够在客户端和服务器之间建立实时、双向的通信通道。
与传统的HTTP通信相比,WebSocket更轻量级、更高效,适用于需要实时通信或推送消息的场景。
WebSocket的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。
1.2.1 websocket 出现背景
WebSocket是一种在客户端和服务器之间建立持久连接的通信协议。它的背景可以追溯到Web应用程序需要实时双向通信的需求。
在传统的HTTP通信中,HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理。
客户端发送请求,服务器响应后即断开连接,HTTP 协议无法实现服务器主动向客户端发起消息,因此无法支持实时性要求高的应用场景,比如在线游戏、即时聊天、股票行情等。
很多网站为了实现推送技术,所用的技术都是轮询。即在特定得时间间隔,由浏览器对服务器发出http请求。
为了解决这一问题,Web开发者开始寻找一种更有效的方式来实现实时通信。WebSocket应运而生,它允许在客户端和服务器之间建立一次连接,并且可以在连接建立后保持长时间活跃,双方可以随时发送数据。这种持久连接的特性使得WebSocket非常适合实时通信应用场景,从而推动了Web应用程序的发展。
WebSocket的发展背景还包括了对网络性能和效率的追求。相比传统的HTTP轮询或长轮询方式,WebSocket可以减少通信的延迟和带宽消耗,提升了网络通信的效率。这也是WebSocket在各种实时通信应用中得到广泛应用的重要原因之一。
总的来说,WebSocket的研发背景主要是为了满足Web应用程序对实时通信的需求,并且提升网络通信的效率和性能。
1.3 websocket与HTTP比较
1.3.1 相似之处:
-
基于TCP/IP协议:WebSocket和HTTP都是基于TCP/IP协议栈的应用层协议。
-
用于客户端和服务器之间的通信:WebSocket和HTTP都是用于客户端和服务器之间的通信,但在用途上有所区别。
1.3.2 不同之处:
-
通信方式:
- HTTP:HTTP是一种单向的、无状态的通信协议,通常是客户端向服务器发起请求,服务器返回响应的模式。
- WebSocket:WebSocket是一种全双工的通信协议,允许客户端和服务器之间同时发送和接收数据,实现了双向通信。
-
连接方式:
- HTTP:HTTP是一种短连接的协议,每次通信都需要建立一个新的连接,通信结束后立即关闭连接。
- WebSocket:WebSocket是一种长连接的协议,一旦建立连接,客户端和服务器之间可以保持长时间的通信,不需要频繁地建立和断开连接。
-
数据格式:
- HTTP:HTTP通常使用文本格式来传输数据,如HTML、JSON等。
- WebSocket:WebSocket支持传输任意格式的数据,可以是文本、二进制等。
-
实时性和效率:
- HTTP:HTTP通常是基于请求-响应模式,因此在实时性和效率上有一定的限制,适用于普通的网页浏览和数据传输。
- WebSocket:WebSocket是专门设计用于实时通信的协议,实时性和效率较高,适用于需要实时通信或推送消息的场景。
-
适用场景:
- HTTP:适用于普通的网页浏览、数据传输等场景。
- WebSocket:适用于实时聊天应用、在线游戏、实时数据展示等需要实时通信的场景。
1.4 websocket握手过程
WebSocket握手过程是建立WebSocket连接的第一步,它是基于HTTP协议的,但在一定程度上有所不同。以下是WebSocket握手过程的简要步骤:
-
客户端发送WebSocket握手请求:客户端发送一个HTTP请求给服务器,请求升级连接为WebSocket。请求中包含了一些特殊的头部字段,如Upgrade和Connection字段,以及Sec-WebSocket-Key字段等。
-
服务器响应WebSocket握手请求:服务器收到客户端的握手请求后,会进行验证并作出响应。服务器会返回一个HTTP 101状态码(表示协议切换)并在响应头部中包含一些特殊的字段,如Upgrade和Connection字段,以及Sec-WebSocket-Accept字段等。同时,服务器也会发送一些WebSocket扩展和子协议等信息。
-
建立WebSocket连接:客户端收到服务器的响应后,如果状态码为101,则握手成功,此时WebSocket连接已经建立。客户端和服务器可以通过该连接进行双向通信。
-
双方开始交换数据:建立了WebSocket连接后,客户端和服务器可以随时发送数据,并且可以实现双向通信。
需要注意的是,WebSocket握手过程在HTTP层面进行,但建立了WebSocket连接后,通信协议会切换到WebSocket协议,之后的通信就不再遵循HTTP协议的规则。这样可以实现更加高效和实时的双向通信。
二、WebSocket的用法
1. 创建WebSocket连接
在JavaScript中,可以使用WebSocket API来创建WebSocket连接:
javascript
var socket = new WebSocket('ws://example.com/socket');
2. 监听WebSocket事件
可以监听WebSocket对象的各种事件,包括连接建立、消息接收、连接关闭等:
javascript
socket.onopen = function() {
console.log('WebSocket连接已建立');
};
socket.onmessage = function(event) {
console.log('收到消息:', event.data);
};
socket.onclose = function() {
console.log('WebSocket连接已关闭');
};
3. 发送和接收消息
通过WebSocket对象的send方法可以向服务器发送消息,服务器也可以通过WebSocket对象的send方法向客户端发送消息:
javascript
// 发送消息
socket.send('Hello, Server!');
// 接收消息在onmessage事件中处理
socket.onmessage = function(event) {
console.log('收到消息:', event.data);
};
三、WebSocket在项目中的应用
WebSocket可以被广泛应用于需要实时通信或推送消息的场景,例如:
-
实时聊天应用:WebSocket能够实现即时通讯,可以让用户之间实时发送消息、接收消息。
-
在线游戏:WebSocket可用于在线游戏中,实现玩家之间的实时交互、游戏状态的同步等功能。
-
实时数据展示:对于需要实时展示数据变化的项目,如股票交易系统、监控系统等,可以使用WebSocket将实时数据推送给客户端。
-
协作编辑:在协作编辑类的应用中,多个用户可以同时编辑同一个文档或项目,WebSocket可以用于实现多用户之间的实时同步。
-
通知推送:WebSocket可以用于向客户端推送实时通知,例如新消息通知、系统提醒等。
3.1 示例:实时聊天应用
下面是一个简单的实时聊天应用的示例,使用WebSocket实现客户端和服务器之间的实时通信:
1、服务端代码(Node.js)
javascript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('收到消息:', message);
// 广播消息给所有客户端
wss.clients.forEach(function each(client) {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
2、客户端代码(HTML + JavaScript)
html
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
</head>
<body>
<input type="text" id="messageInput">
<button onclick="sendMessage()">Send</button>
<ul id="messageList"></ul>
<script>
var socket = new WebSocket('ws://localhost:8080');
socket.onmessage = function(event) {
var messageList = document.getElementById('messageList');
var li = document.createElement('li');
li.textContent = event.data;
messageList.appendChild(li);
};
function sendMessage() {
var messageInput = document.getElementById('messageInput');
var message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
这个示例实现了一个简单的实时聊天应用,用户可以在输入框中输入消息并发送,其他用户能够即时收到消息并显示在页面上。
结论
WebSocket是一种强大的实时通信协议,它能够在客户端和服务器之间建立持久的双向通信通道,为项目中的实时通信场景提供了极大的便利。通过本文的介绍和示例,相信读者对WebSocket有了更深入的理解,能够更加灵活地运用WebSocket解决实际的项目需求。