运用 avant-garde 方法巧妙捕捉页面离线通信

2023-10-29 14:47:16

在web开发中，有时候我们需要在用户离开页面的时候，做一些上报来记录用户行为。又或者是发送服务器ajax请求，通知服务器用户已经离开，比如直播间内的退房操作。本文主要分两部分来讲解怎么完成退出行为的上报。

浏览器事件

浏览器有两个事件可以用来监听页面关闭，beforeunload和unload。

beforeunload：在页面关闭之前触发。
unload：在页面关闭之后触发。

这两个事件的区别在于，beforeunload事件会在页面关闭之前触发，此时用户还可以取消关闭操作。而unload事件会在页面关闭之后触发，此时用户已经无法取消关闭操作。

window.addEventListener('beforeunload', (event) => {
  // 在页面关闭之前执行的操作
});

window.addEventListener('unload', (event) => {
  // 在页面关闭之后执行的操作
});

WebSocket

WebSocket是一种双向通信协议，可以在客户端和服务器之间建立一个持久的连接。WebSocket连接一旦建立，客户端和服务器就可以相互发送数据。WebSocket连接不会因为页面的关闭而中断，因此我们可以利用WebSocket来实现页面的离线通信。

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {
  // WebSocket连接建立成功
};

socket.onmessage = (event) => {
  // 收到服务器发送的消息
};

socket.onclose = () => {
  // WebSocket连接关闭
};

socket.onerror = (error) => {
  // WebSocket连接出错
};

socket.send('Hello, world!');

服务端通信

在服务端，我们需要创建一个WebSocket服务器来接收客户端发送的消息。

<?php
$server = new WebSocketServer('127.0.0.1', 8080);
$server->run();

当客户端发送消息时，WebSocket服务器会调用onMessage()方法。

class WebSocketServer
{
    private $clients = array();

    public function __construct($address, $port)
    {
        $this->socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
        socket_bind($this->socket, $address, $port);
        socket_listen($this->socket);
    }

    public function run()
    {
        while (true) {
            $client = socket_accept($this->socket);
            $this->clients[] = $client;

            $this->handleClient($client);
        }
    }

    private function handleClient($client)
    {
        while (true) {
            $data = socket_read($client, 1024);
            if ($data === false or $data === '') {
                socket_close($client);
                $this->clients = array_diff($this->clients, array($client));
                break;
            }

            $this->broadcast($data, $client);
        }
    }

    private function broadcast($data, $client)
    {
        foreach ($this->clients as $c) {
            if ($c != $client) {
                socket_write($c, $data);
            }
        }
    }
}