实现PC与安卓手机（浏览器端）通信及手机触发PC端操作

嘿，你的这个场景必须用到实时双向通信技术，WebSocket是最适合的方案——毕竟普通HTTP是「请求-响应」模式，PC端的mysite页面没法主动感知到手机端的操作，所以需要一个中间服务器来中转消息，让手机端的点击动作能实时通知到PC端页面。

下面给你具体的实现方向，结合XAMPP环境来拆解：

核心架构思路 #

你需要一个WebSocket服务器作为消息中转站：

• PC端的localhost/mysite页面启动后，主动连接到WebSocket服务器，保持长连接等待消息
• 手机端访问PC局域网IP下的mysite-2（比如192.168.x.x/mysite-2），点击按钮时向WebSocket服务器发送「更新指令」
• WebSocket服务器收到指令后，立刻把消息推送给所有连接的PC端页面
• PC端页面收到消息后，执行修改#p-1文本的操作

具体实现步骤 #

1. 搭建WebSocket服务器 #

你可以选择两种适配XAMPP的方案：

方案A：用PHP（和XAMPP原生环境兼容）

• 首先确保XAMPP的PHP开启了openssl扩展（在php.ini里取消extension=openssl的注释）
• 安装Ratchet（PHP常用的WebSocket框架）：在你的项目根目录打开命令行，执行composer require cboden/ratchet（需要先安装Composer）
• 编写服务器脚本server.php：

  <?php
  require __DIR__ . '/vendor/autoload.php';
  
  use Ratchet\MessageComponentInterface;
  use Ratchet\ConnectionInterface;
  use Ratchet\Server\IoServer;
  use Ratchet\Http\HttpServer;
  use Ratchet\WebSocket\WsServer;
  
  class Chat implements MessageComponentInterface {
      protected $clients;
  
      public function __construct() {
          $this->clients = new \SplObjectStorage;
      }
  
      public function onOpen(ConnectionInterface $conn) {
          $this->clients->attach($conn);
          echo "New connection! ({$conn->resourceId})\n";
      }
  
      public function onMessage(ConnectionInterface $from, $msg) {
          // 收到手机端的消息后，广播给所有连接的PC端客户端
          foreach ($this->clients as $client) {
              if ($from !== $client) {
                  $client->send($msg);
              }
          }
      }
  
      public function onClose(ConnectionInterface $conn) {
          $this->clients->detach($conn);
          echo "Connection {$conn->resourceId} has disconnected\n";
      }
  
      public function onError(ConnectionInterface $conn, \Exception $e) {
          echo "An error has occurred: {$e->getMessage()}\n";
          $conn->close();
      }
  }
  
  $server = IoServer::factory(
      new HttpServer(
          new WsServer(
              new Chat()
          )
      ),
      8080 // 监听的端口，可自行修改
  );
  
  $server->run();
  

• 启动服务器：在命令行执行php server.php，保持这个窗口打开，服务器就会一直运行

方案B：用Node.js（更简单，快速上手）

• 安装Node.js，然后在项目目录打开命令行，执行npm init -y && npm install ws
• 编写服务器脚本server.js：

  const WebSocket = require('ws');
  const wss = new WebSocket.Server({ port: 8080 });
  
  wss.on('connection', (ws) => {
      console.log('New client connected');
      ws.on('message', (message) => {
          // 广播消息给所有其他客户端
          wss.clients.forEach((client) => {
              if (client !== ws && client.readyState === WebSocket.OPEN) {
                  client.send(message);
              }
          });
      });
      ws.on('close', () => {
          console.log('Client disconnected');
      });
  });
  
  console.log('WebSocket server running on ws://localhost:8080');
  

• 启动服务器：执行node server.js，保持窗口打开

2. 改造两个页面 #

PC端：localhost/mysite/index.html

页面加载时连接WebSocket服务器，监听消息并更新元素：

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
</head>
<body>
    <p id="p-1"></p>
    <script>
        // 连接到WebSocket服务器
        const socket = new WebSocket('ws://localhost:8080');
        
        // 收到消息时执行更新
        socket.onmessage = function(event) {
            if (event.data === 'update_p1') {
                document.querySelector('#p-1').textContent = 'My text';
            }
        };

        socket.onopen = function() {
            console.log('Connected to WebSocket server');
        };
    </script>
</body>
</html>

手机端：localhost/mysite-2/index.html

注意：手机要访问PC的局域网IP（比如192.168.1.100/mysite-2），不能用localhost，因为手机的localhost是它自己。代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>My Site 2</title>
</head>
<body>
    <button>Click me</button>
    <script>
        // 替换成你的PC局域网IP，比如192.168.1.100
        const socket = new WebSocket('ws://192.168.1.100:8080');
        
        document.querySelector('button').addEventListener('click', function() {
            // 发送更新指令
            socket.send('update_p1');
        });

        socket.onopen = function() {
            console.log('Connected to WebSocket server');
        };
    </script>
</body>
</html>

3. 测试注意事项 #

• 确保手机和PC在同一个WiFi局域网内
• 关闭PC的防火墙（或者开放8080端口），避免连接被拦截
• 保持WebSocket服务器的命令行窗口处于打开状态，不能关闭

内容的提问来源于stack exchange，提问作者nick