Nodejs 来创建你自己的双屏幕互动应用，本人弄的，来支持一下吧。

Nodejs 来创建你自己的双屏幕互动应用，本人弄的，来支持一下吧。

#N-dual.js

##双屏幕互动应用

Create by youyudehexie

参考 controldeck.js, remote.js

##如何开始

  1. 打开例子 http://ndual.whattoc.com/example1
  2. 用手机扫描二维码，二维码内容是控制器的地址，打开改地址，对屏幕进行控制
  3. 左右滑动屏幕，能够控制页面内容

注意！！:

1.因为服务器资源紧缺，所以二维码是由google api来生成的，偶尔会抽风，如果有VPN的同学，挂上VPN望理解

2.采用微信二维码扫描的同学，请注意，微信的浏览器渣一般，所以操作起来非常卡顿，建议用手机chrome打开，才能有较好的用户的体验。

##制作你自己的双屏幕应用

<script src="/socket.io/socket.io.js"></script>
<script src="/ndual.js"></script>
<script>
    Ndual(function(message){
        if(message === 'dragright') Reveal.navigateRight();  
        else if (message === 'dragleft') Reveal.navigateLeft();
    })
</script>

ndual.js 会收集遥控操作信息，发送到你的页面应用上，只要你加上js，你的应用就能变成双屏幕操作的应用，消息目前只支持 向左滑动 和向右滑动和登陆消息，根据消息，你可以对你的页面进行相应设计。

##例子

##下载

https://github.com/youyudehexie/n-dual/tree/master/public/build

如果有问题和疑问，可以跟帖。。


12 回复

Nodejs 来创建你自己的双屏幕互动应用

双屏幕互动应用

Create by youyudehexie

参考 controldeck.js, remote.js

如何开始

  1. 打开例子: http://ndual.whattoc.com/example1
  2. 用手机扫描二维码，二维码内容是控制器的地址，打开该地址，对屏幕进行控制。
  3. 左右滑动屏幕，能够控制页面内容。

注意！！:

  1. 因为服务器资源紧缺，所以二维码是由Google API来生成的，偶尔会抽风，如果有VPN的同学，挂上VPN望理解。
  2. 采用微信二维码扫描的同学，请注意，微信的浏览器渣一般，所以操作起来非常卡顿，建议用手机Chrome打开，才能有更好的用户体验。

制作你自己的双屏幕应用

要创建你自己的双屏幕互动应用，你需要引入 socket.io 和 ndual.js。以下是基本的实现步骤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双屏幕互动应用</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/ndual.js"></script>
</head>
<body>
    <div id="content">
        <!-- 页面内容 -->
    </div>

    <script>
        // 初始化 ndual.js
        Ndual(function(message) {
            if (message === 'dragright') {
                // 处理向右滑动事件
                document.getElementById('content').scrollLeft += 50; // 滚动右侧
            } else if (message === 'dragleft') {
                // 处理向左滑动事件
                document.getElementById('content').scrollLeft -= 50; // 滚动左侧
            }
        });
    </script>
</body>
</html>

在这个示例中，我们首先引入了 socket.io 和 ndual.js。然后，通过 Ndual 函数监听来自控制器的消息。当接收到 'dragright' 或 'dragleft' 消息时，我们会滚动页面内容以响应用户操作。

示例

  1. example1
  2. example2

下载

你可以从以下链接下载 ndual.js 文件: https://github.com/youyudehexie/n-dual/tree/master/public/build

如果有问题和疑问，可以跟帖交流。


创建了种子项目，欢迎大家来测试一下。

顶一下

演讲的时候，手机可以做遥控器了

太帅了！

你这个是需要服务器作websocket的中转站么？

赞

赞！

so cool！

貌似左右反了。。。哈哈

its so cool

为了创建一个双屏幕互动应用，我们可以使用 Node.js 和 WebSocket 技术。在这个应用中，一个屏幕作为控制器，另一个屏幕作为显示内容的屏幕。我们可以通过 WebSocket 进行实时通信。

首先，我们需要设置一个简单的 Node.js 服务器来处理 WebSocket 连接。然后，在客户端页面中，我们将使用 socket.io 库来处理 WebSocket 通信，并通过 JavaScript 控制页面内容。

示例代码

1. 创建 Node.js 服务器

// server.js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('control', (data) => {
    io.emit('control', data); // 广播给所有连接的客户端
  });

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

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

2. 客户端 HTML 文件

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interactive Dual Screen App</title>
  <script src="/socket.io/socket.io.js"></script>
  <script src="/ndual.js"></script>
  <script>
    Ndual(function(message) {
      if (message === 'dragright') {
        document.getElementById('content').scrollLeft += 50; // 滚动内容向右
      } else if (message === 'dragleft') {
        document.getElementById('content').scrollLeft -= 50; // 滚动内容向左
      }
    });
  </script>
</head>
<body>
  <div id="content" style="width: 100%; overflow-x: scroll;">
    <!-- Your content goes here -->
  </div>
</body>
</html>

3. ndual.js 文件

// ndual.js
const socket = io();

document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

let xDown = null;
let yDown = null;

function getTouches(event) {
  return event.touches ||             // browser API
    event.originalEvent.touches;      // jQuery
}

function handleTouchStart(event) {
  const firstTouch = getTouches(event)[0];
  xDown = firstTouch.clientX;
  yDown = firstTouch.clientY;
}

function handleTouchMove(event) {
  if (!xDown || !yDown) {
    return;
  }

  var xUp = event.touches[0].clientX;
  var yUp = event.touches[0].clientY;

  var xDiff = xDown - xUp;
  var yDiff = yDown - yUp;

  if (Math.abs(xDiff) > Math.abs(yDiff)) { // 水平移动
    if (xDiff > 0) {
      socket.emit('control', 'dragright'); // 向右滑动
    } else {
      socket.emit('control', 'dragleft'); // 向左滑动
    }
  }

  xDown = null;
  yDown = null;
}

解释

  1. 服务器：使用 Express 和 Socket.IO 设置了一个基本的 WebSocket 服务器。
  2. 客户端 HTML：页面包含一个可滚动的容器，用于展示内容。
  3. ndual.js：监听触摸事件并发送控制消息到服务器，服务器再将这些消息广播给所有连接的客户端。

通过这种方式，你可以实现一个基本的双屏幕互动应用。

回到顶部