Nodejs 新手求教，大神看看我的代码问题出在哪里呢？

Nodejs 新手求教，大神看看我的代码问题出在哪里呢？

服务端 io.sockets.on(‘connection’, function (socket) { socket.on(“news”,function(d){ socket.broadcast.emit(“news”,d); }) socket.emit(“info”,socket.id); });

客户端： var socket = io.connect(‘http://localhost:8800’); var pos = {}; window.addEventListener(“click”,function(event){ var e = event || window.event; pos.x = e.pageX; pos.y = e.pageY; document.getElementById(“self”).innerHTML =“您点击的坐标为”+pos.x+":"+pos.y; socket.emit(“news”,pos); }) socket.on(‘news’, function (data) { document.getElementById(“num”).innerHTML =data.id+“对方点击的坐标为”+data.x+":"+data.y; }); socket.on(“info”,function(d){ document.getElementById(“info”).innerHTML = d; })

pc 上测试都没问题 但是 在手机上 获取不到 点击的 坐标


4 回复

根据你的描述，你遇到了一个在PC上可以正常工作但在手机上无法获取点击坐标的问题。这可能是因为手机上的事件处理机制与PC不同。在手机上，点击事件通常是通过触摸事件（如touchstart, touchend等）触发的。

服务端代码

你的服务端代码看起来没有问题，它正确地处理了客户端发送的消息，并将消息广播给其他连接的客户端。

io.sockets.on('connection', function (socket) {
    socket.on("news", function(data) {
        socket.broadcast.emit("news", data);
    });

    socket.emit("info", socket.id);
});

客户端代码

在客户端代码中，你需要处理触摸事件而不是鼠标点击事件。以下是修改后的客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Socket.IO Example</title>
</head>
<body>
    <div id="self"></div>
    <div id="num"></div>
    <div id="info"></div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io.connect('http://localhost:8800');
        var pos = {};

        // 处理触摸事件
        window.addEventListener('touchstart', function(event) {
            var touch = event.touches[0]; // 获取第一个触摸点
            pos.x = touch.pageX;
            pos.y = touch.pageY;

            document.getElementById("self").innerHTML = "您点击的坐标为" + pos.x + ":" + pos.y;
            socket.emit("news", pos);
        });

        socket.on('news', function(data) {
            document.getElementById("num").innerHTML = "对方点击的坐标为" + data.x + ":" + data.y;
        });

        socket.on("info", function(d) {
            document.getElementById("info").innerHTML = d;
        });
    </script>
</body>
</html>

解释

  1. 触摸事件处理：在移动设备上，点击通常由触摸事件触发。因此，我们使用touchstart事件来捕获触摸点的位置。
  2. 获取触摸点位置：event.touches[0]提供了触摸点的信息，包括pageX和pageY属性，这些属性表示触摸点相对于视口的位置。
  3. 更新DOM：当检测到触摸事件时，更新显示的坐标并发送数据到服务器。

这样修改后，你应该能够在手机上正确地获取点击坐标。


你这连接的不对吧

<code>var socket = io.connect(‘http://localhost:8800’);<code>

非常感谢 io.connect() 这样写 就没问题了， 这是什么原因呢

根据你的描述，在PC上测试没有问题，但在手机上获取不到点击的坐标。这个问题可能与不同设备上的事件处理机制有关。在手机上，点击事件通常是通过触摸屏触发的，而不是鼠标事件。因此，你需要使用触摸事件来替代鼠标事件。

以下是修改后的客户端代码示例：

var socket = io.connect('http://localhost:8800');
var pos = {};

// 使用触摸事件替代鼠标事件
window.addEventListener("touchstart", function(event) {
    var touchEvent = event.touches[0];
    pos.x = touchEvent.pageX;
    pos.y = touchEvent.pageY;
    document.getElementById("self").innerHTML = "您点击的坐标为" + pos.x + ":" + pos.y;
    socket.emit("news", pos);
});

socket.on('news', function(data) {
    document.getElementById("num").innerHTML = "对方点击的坐标为" + data.x + ":" + data.y;
});

socket.on("info", function(d) {
    document.getElementById("info").innerHTML = d;
});

解释：

  1. 触摸事件替换：将 window.addEventListener("click", ...) 替换为 window.addEventListener("touchstart", ...)
  2. 获取触摸位置：event.touches[0] 可以获取触摸点的位置信息，包括 pageX 和 pageY。

以上修改应该可以解决在手机上无法获取点击坐标的问题。你可以尝试在手机上运行这段代码，看看是否能够正确捕获触摸事件并发送数据。

回到顶部