Nodejs 如何能写出一个应用能让pc和手机终端连接起来

Nodejs 如何能写出一个应用能让pc和手机终端连接起来

类似当初chrome的那个项目, pc和手机访问同一个url,服务器接收到2个请求,同时判断2个ua,给手机返回一个控制器,pc一个游戏界面,可以通过把手机作为遥控器输入,控制pc上的游戏,能否实现,或者有类似的模块了么?

5 回复

Node.js 如何能写出一个应用能让PC和手机终端连接起来

背景 类似于Chrome的某个项目，用户可以在PC和手机上访问同一个URL。服务器接收到两个请求，并根据设备的不同（通过User-Agent判断），给手机端返回一个控制器页面，而给PC端返回一个游戏界面。手机可以作为一个遥控器来控制PC上的游戏。

实现思路

  1. 创建服务器：使用Node.js创建一个HTTP服务器，接收来自不同设备的请求。
  2. 识别设备：根据User-Agent识别请求的设备类型（手机或PC）。
  3. 返回不同的页面：根据设备类型返回不同的HTML页面。
  4. 通信机制：在手机和PC之间建立一种通信机制，比如WebSocket，使得手机可以发送指令到PC。

示例代码

const http = require('http');
const url = require('url');
const WebSocket = require('ws');

// 创建HTTP服务器
const server = http.createServer((req, res) => {
    const parsedUrl = url.parse(req.url, true);
    
    // 根据User-Agent判断设备类型
    let userAgent = req.headers['user-agent'];
    if (userAgent.includes('Mobile')) {
        // 返回手机端控制器页面
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(`
            <html>
                <head>
                    <title>手机遥控器</title>
                    <script src="https://cdn.jsdelivr.net/npm/socket.io-client/dist/socket.io.min.js"></script>
                </head>
                <body>
                    <button id="control">点击控制PC</button>
                    <script>
                        var socket = io('ws://localhost:8080');
                        document.getElementById('control').addEventListener('click', function() {
                            socket.emit('control', { action: 'click' });
                        });
                    </script>
                </body>
            </html>
        `);
    } else {
        // 返回PC端游戏界面
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(`
            <html>
                <head>
                    <title>游戏界面</title>
                    <script src="https://cdn.jsdelivr.net/npm/socket.io-client/dist/socket.io.min.js"></script>
                </head>
                <body>
                    <h1>游戏界面</h1>
                    <script>
                        var socket = io('ws://localhost:8080');
                        socket.on('control', function(data) {
                            console.log('Received control:', data);
                            // 处理控制逻辑
                        });
                    </script>
                </body>
            </html>
        `);
    }
});

// 创建WebSocket服务器
const wss = new WebSocket.Server({ server });

wss.on('connection', (socket) => {
    console.log('客户端连接上了');
    
    socket.on('message', (message) => {
        console.log('Received:', message);
    });
});

server.listen(8080, () => {
    console.log('Server is listening on port 8080');
});

解释

  • 服务器监听8080端口，根据请求的User-Agent区分手机和PC。
  • 手机端返回一个包含Socket.IO库的HTML页面，用于发送控制指令。
  • PC端返回一个简单的HTML页面，用于接收并处理来自手机端的控制指令。
  • 使用WebSocket进行实时通信，确保手机可以实时控制PC上的游戏。

这样，你就可以实现一个基本的手机控制PC的游戏界面应用了。


智能家居之类的很早就有做这种程序了，不过拿手机玩PC上的游戏这功能很鸡肋吧，大型的话直接PC上玩的话手感比不上真手柄，小的游戏又不如直接做手机游戏

想怎么连起来？干什么

socketio完全可以啊。。

要实现一个应用，使得PC和手机终端可以互相连接并协同工作（例如，将手机作为PC游戏的控制器），你可以使用Node.js配合WebSocket技术。WebSocket允许实时双向通信，非常适合这种场景。

实现思路

  1. 建立服务器：使用Node.js创建一个服务器来处理来自PC和手机的请求。
  2. 处理不同设备：根据用户代理（User Agent）区分PC和手机设备，并向它们发送不同的内容。
  3. WebSocket通信：使用WebSocket实现PC和手机之间的实时通信。

示例代码

安装依赖

首先，你需要安装ws库来支持WebSocket：

npm install ws

创建服务器

以下是一个简单的Node.js服务器示例，该服务器接收来自PC和手机的连接请求，并根据User-Agent进行分类，然后通过WebSocket实现二者之间的通信。

const http = require('http');
const WebSocket = require('ws');

// 创建HTTP服务器
const server = http.createServer((req, res) => {
    const userAgent = req.headers['user-agent'];
    if (userAgent.includes("Mobile")) { // 假设移动设备包含"Mobile"关键字
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end('<html><body>手机页面</body></html>');
    } else {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end('<html><body>PC页面</body></html>');
    }
});

// 创建WebSocket服务器
const wss = new WebSocket.Server({ server });

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        console.log('received: %s', message);
        // 向所有连接的客户端广播消息
        wss.clients.forEach(function each(client) {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

server.listen(8080, () => {
    console.log('Server listening on port 8080');
});

手机和PC页面

为手机和PC分别创建简单的HTML页面。手机页面用于输入控制信息，而PC页面显示游戏界面。

手机页面 (mobile.html)

<!DOCTYPE html>
<html>
<head>
    <title>手机控制器</title>
</head>
<body>
    <input type="text" id="controllerInput">
    <button onclick="sendControl()">发送控制</button>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io();
        function sendControl() {
            var value = document.getElementById('controllerInput').value;
            socket.emit('control', value);
        }
    </script>
</body>
</html>

PC页面 (pc.html)

<!DOCTYPE html>
<html>
<head>
    <title>游戏界面</title>
</head>
<body>
    <div id="game">游戏界面</div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io();
        socket.on('control', function (msg) {
            console.log('Received control:', msg);
            // 更新游戏界面
            document.getElementById('game').innerText = '收到控制指令: ' + msg;
        });
    </script>
</body>
</html>

总结

这个示例展示了如何使用Node.js和WebSocket实现PC和手机之间的简单交互。你可以根据具体需求调整通信逻辑，比如更复杂的控制指令、安全措施等。希望这能帮到你！

回到顶部