📌  相关文章
📜  WebSockets-实现(1)

📅  最后修改于: 2023-12-03 14:48:26.259000             🧑  作者: Mango

WebSockets-实现介绍

什么是WebSockets？

WebSockets是HTML5一种新特性，它提供了一种在单个TCP连接上进行全双工通信的方式。相对于传统的HTTP请求-响应协议，WebSockets能够提供更加实时和高效的双向数据传输。WebSockets允许服务器主动向客户端推送数据，而不需要客户端进行轮询请求。

如何实现WebSockets？

实现WebSockets需要两个部分：客户端和服务器端。客户端和服务器端之间建立一个WebSocket连接，这个连接会保持打开状态，直到客户端或者服务器端发送一个关闭请求。

客户端实现

HTML

在HTML中，我们需要创建一个WebSocket对象并指定连接的URL。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>WebSockets</title>
</head>
<body>
  <script>
    var socket = new WebSocket('ws://localhost:8080');
    socket.onmessage = function(event) {
      console.log('接收到消息：' + event.data);
    };
  </script>
</body>
</html>

在上面的示例中，我们创建了一个WebSocket对象，并连接到了ws://localhost:8080。一旦连接建立，我们就可以通过监听onmessage事件来接收来自服务器发送的消息。调用socket.send()方法可以向服务器发送消息。

JavaScript

在JavaScript中，我们可以使用WebSocket类来实现WebSocket客户端。初始化WebSocket时，我们需要传入完整的WebSocket URL。

const socket = new WebSocket('ws://localhost:8080');
socket.onmessage = function(event) {
  console.log('接收到消息：' + event.data);
};
服务器端实现

在服务器端实现WebSocket通信需要使用一个WebSocket服务器。在Node.js中，我们可以使用ws模块来实现WebSocket服务器。使用ws模块时，我们可以注册一组回调函数来响应WebSocket事件。

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', function(socket) {
  console.log('WebSocket连接已建立');
  socket.send('欢迎！');

  socket.on('message', function(message) {
    console.log('接收到消息：' + message);
    socket.send('你发送的消息是：' + message);
  });

  socket.on('close', function() {
    console.log('WebSocket连接已关闭');
  });
});

在上面的示例中，我们创建了WebSocket服务器，并监听端口8080。在connection事件中，我们可以执行必要的初始化操作，并向客户端发送欢迎消息。在message事件中，我们可以监听客户端发送的消息并给予相应的响应。当WebSocket连接关闭后，我们可以在close事件中进行必要的清理工作。

总结

WebSockets是一种强大的网络协议，它可以用于实现高效的双向数据通信。在客户端实现WebSockets时，我们需要创建WebSocket对象并指定连接的URL。在服务器端实现WebSockets时，我们需要使用WebSocket服务器，并注册一组回调函数来响应WebSocket事件。