在解释 WebSocket 之前，我们来看一个需求：

需要在地图上展示车辆的实时位置信息，车辆的位置可能随时都会发生变化，那么这个实时位置应该如何实现呢？

最简单的方法就是通过 Ajax 进行轮询，这样的问题就是不管车辆位置有没有发生变化，Web 端都会发送请求，浪费资源。

再进一步的就是使用 Commet 技术，它的原理是当客户端发送一个HTTP请求到服务器后，服务器会保持连接打开，直到有新数据可用或超时为止。而一旦有新数据，服务器会立即响应，然后客户端会立刻发送下一个请求。这种方式在一定程度上模拟了实时通信，但仍然需要频繁的HTTP请求和响应，而且，一个请求一直不断开，也很浪费客户端和服务器的资源。

更进一步的就是我们本节要说的 WebSocket 了。WebSocket 是一种在客户端和服务器之间建立持久连接的通信协议，它允许双向通信，使得实时数据传输变得更加高效。与传统的 HTTP 请求-响应模型不同，WebSocket 连接一旦建立，可以保持打开状态，双方可以随时发送数据，而不需要每次都重新建立连接。这种特性使得 WebSocket 特别适用于实时应用程序。

示例

下面是一个关于 WebSocket 的示例：

<!-- HTML 文件 -->
<input type="text" id="message" placeholder="输入消息">
<button onclick="sendMessage()">发送消息</button>
<div id="output"></div>

<script>
const socket = new WebSocket('ws://WebSocket服务器地址');

// 监听连接事件
socket.addEventListener('open', (event) => {
  console.log('已连接到服务器');
});

// 监听消息事件
socket.addEventListener('message', (event) => {
  const output = document.getElementById('output');
  output.innerHTML += `<p>收到消息: ${event.data}</p>`;
});

// 发送消息
function sendMessage() {
  const messageInput = document.getElementById('message');
  const message = messageInput.value;
  socket.send(message);
  messageInput.value = '';
}
</script>

它是 HTML5 的一个主要特性，现代浏览器原生就支持该功能，所以可以可以发现使用起来非常简单。接收到消息时，就是会执行 message 事件，而通过 socket.send 就可以向服务器发送消息。

socket.io

相信很多人都听过 socket.io 这个库，它是一个流行的实时应用程序开发库，基于 WebSocket 和其他实时通信技术构建。如果你有实时通信的需求，那么使用 socket.io 是一个不错的选择，它简化了实时通信的复杂性，为开发者提供了一种便捷的方式来实现实时功能。

但需要注意，虽然 socket.io 是基于 WebScoket，但它不是 WebSocket，使用 socket.io 时前后端必须同时使用。如果你的服务端使用的是 WebSocket，而客户端使用 socket.io 进行连接，会发现一直连接失败，反之也是一样。这是因为 socket.io 会在添加一些扩展字段，而这些并非 WebSocket 标准。

总结

最后总结一下，WebSocket 提供了一种更高效、更可靠的方式来实现实时通信，而不需要频繁的请求和轮询。它使得构建实时应用程序变得更加简单和高效。无论您是开发在地图监控，还是线聊天应用，亦或者多人游戏，WebSocket 都是不可或缺的工具之一。