一、什么是WebSocket？

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务端之间的实时数据传输成为可能。

与 HTTP 相比，WebSocket 精简、高效、快速，可以通过 JavaScript 在浏览器中直接实现即时通信。

二、 WebSocket 工作原理是什么？

WebSocket 客户端与 WebSocket 服务器建立连接，该连接始终保持开放状态。

WebSocket 使用固定的URI，该 URI 通过浏览器或应用程序发送到 WebSocket 服务器。WebSocket 服务器接收客户端请求并创建新的握手。

WebSocket 服务器通过HTTP 连接将握手响应返回到客户端，然后将连接升级到WebSocket 协议。

客户端和服务端之间的数据在连接上进行通讯。数据可以是文本或二进制数据，由发送者指定。

三、如何实现WebSocket连接?

在 JavaScript 中，使用 WebSocket API 进行创建 WebSockets 连接。WebSocket 类提供了构造功能，该功能将 WebSocket URI 作为输入。

var ws = new WebSocket("ws://localhost:8080");

一旦连接被建立，采用以下代码来发送数据：

ws.send("Hello, Server");

对 WebSockets 的每个节点（也称为 peer）进行处理的方式与同步HTTP请求相同。您可以获得事件的通知。

ws.onopen = function(){
  alert("WebSocket连接已打开!");
};

ws.onmessage = function (evt) { 
  var received_msg = evt.data;
  alert("Message is received..."+received_msg);
};

ws.onclose = function() { 
  alert("WebSocket已关闭!"); 
};

四、WebSocket 应用场景有哪些？

WebSocket 适用于需要处理实时数据的应用程序。以下是几个适合使用 WebSocket 的场合：

• 即时聊天
• 在线游戏
• 即时应用程序和控制面板
• 共享文档和文件

五、WebSocket 的优点有哪些？

• 实时性: WebSocket 是真正的实时标准。
• 更少的流量: 使用HTTP轮询需要发送更多的 HTTP 请求到服务器上，降低了系统的性能。
• 双向通信: WebSocket 支持双向通信，让服务端可以同时发送和接收数据。
• 更少的延迟: 在使用长轮询或 HTTP 流之类的传输时，由于握手时间和请求/响应延迟，数据传输速度会变慢。

六、WebSocket 的缺点有哪些？

• 浏览器兼容性问题: 一些旧版本的浏览器可能不支持 WebSocket。
• 实时性高的应用场合较多： 对服务器的负载压力较大。
• 在使用安全传输（TLS/SSL）时，服务器的性能会降低。

七、完整的代码示例

JavaScript 实现WebSocket连接：

var ws = new WebSocket("ws://localhost:8080");

ws.onopen = function() {
  ws.send("Hello, Server!");
};

ws.onmessage = function (evt) { 
  var received_msg = evt.data;
  console.log("Message is received... "+received_msg);
};

ws.onclose = function() { 
  console.log("WebSocket is closed..."); 
};

Python 实现 WebSocket 服务器：

import asyncio
import websockets

async def echo(websocket, path):
    async for message in websocket:
        await websocket.send(message)

start_server = websockets.serve(echo, "localhost", 8765)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

HTML5 的 WebSockets 使用示例:

	


	<script type="text/javascript">
		var socket = new WebSocket("ws://localhost:8080");

		socket.onopen = function() {
			document.getElementById("status").innerHTML = "Connection Open";
			socket.send("Hello, Server!");
		};

		socket.onmessage = function(evt) {
			document.getElementById("message").innerHTML = evt.data;
		};

		socket.onclose = function() {
			document.getElementById("status").innerHTML = "Connection Closed";
		};

		function sendMessage() {
			var message = document.getElementById("text").value;
			socket.send(message);
		}
	</script>

	
WebSocket Example

	
  

		<input type="text" id="text" value="" />
		<input type="button" value="Send" onclick="sendMessage()" />
	
  

	
Connection Closed