前端控制屏幕双屏显示 pos副屏副屏方案

置顶起风了咦

已于 2022-07-01 13:57:22 修改

阅读量2k

点赞数

分类专栏： js vue electron 文章标签： javascript 前端

于 2022-07-01 13:56:28 首次发布

本文链接：https://blog.csdn.net/createWrite/article/details/125545648

版权

js 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

electron

1 篇文章 0 订阅

订阅专栏

之前在做到一个需求电脑接了多个显示器要在主屏上显示web界面第二个屏幕上通过主屏来调起第二个界面

之前在网上看到的方案：通过window.open(url, name, fulls)来打开浏览器计算位置来放打开的界面但是这个有兼容性好像只在火狐生效。还有通过ActiveXObject 插件来控制啥的我也不知道ActiveXObject是啥反正我是没实现，文章来源js控制屏幕双屏显示

面对这个需求可能在店铺里面见得比较多收银机之类的前面收银员收钱的屏幕背面还有个打广告显示收款信息的屏幕这样说应该比较好理解现在看来纯web网页端实现多多少少会有问题（话不能说的太满容易打脸）哈哈之后发现了新的方式也就是我下面要讲的方式通过c语言或者其他的语言来做一个桌面端控件让web网站来调起这个控件通过websocket连接来打通它们的联络实现数据共享

至于用什么语言来写桌面端的控件看你或者公司里人会用什么语言了，我只会前端所以接下来讲的会是用前端的东西来讲实现方案，下面列举了5中比较流行的框架，我用的第一种，毕竟咱前端流行开发工具 vscode工具也是来自它。

时下最流行的5个用于桌面应用程序开发的 JS 框架

Electron
NodeGUI
Proton Native
NW.js
AppJS

使用步骤

1.搭建Electron项目：首先你要明确搭建项目只需要用Electron作中转打开在线的网址还是说你要把页面写在Electron项目里面，Electron可以集成到vue，react等框架具体可以自行百度下面只讲搭建Electron单项目，来连接

安装 electron

npm install -g electron

electron-forge 搭建一个 electron 项目

electron-forge 相当于 electron 的一个脚手架，可以让我们更方便的创建、运行、打包 electron 项目。

npm install -g electron-forge 
electron-forge init my-new-app 
cd my-new-app
npm start

至此项目跑起来了嫌麻烦可以直接克隆官方demo库

2. Electron中使用WebSocket 通信

main.js：程序入口文件我们直接写在主进程中

先创建一个浏览器窗口

const {app,BrowserWindow} = require('electron')
const path = require('path')
let mainWindow  
function createWindow() {
        let displays = electron.screen.getAllDisplays()
        let externalDisplay = displays.find((display) => {
              return display.bounds.x !== 0 || display.bounds.y !== 0
        })
        mainWindow = new BrowserWindow({
          fullscreen: false,
          x: externalDisplay.bounds.x + 500,//
          y: externalDisplay.bounds.y + 50,
          width: 800,
          height: 740,
          title:app.getName(),
          frame: false ,//无边框窗体
          autoHideMenuBar:true,//可以使用户在打开软件时隐藏菜单栏，但是如果用户按下alt按键，菜单栏又会弹出来
          alwaysOnTop:true,//窗口是否永远在别的窗口上面
          webPreferences: {
            //解决electron require未定义,以下两项
            //是否注入nodeapi
            nodeIntegration: true,//nodeIntegration设为false页面就不能使用nodejs和Electron APIs
              contextIsolation: false,	 
            //渲染进程是否启用remote模块
              enableRemoteModule: true,//在渲染进程中使用主进程中的模块方法时，可以使用Electron Remote解决在渲染和主进程间的通讯,这么看 remote 模块可以说是非常好用啦，渲染进程就不用显式通过 ipcRenderer / ipcMain 与主进程通信。除此之外，可以通过 remote.getGlobal 获取主进程中 的全局变量, 通过 remote.process 拿到主进程的 process 对象信息
            preload: path.join(__dirname, 'preload.js')
          }
        })
  // 窗口 不在任务栏显示  true 表示不显示，false 表示显示。
  mainWindow.setSkipTaskbar(false)
  //启动时加载 index.html页面.
  mainWindow.loadFile('./index.html')
  //打开页面调试工具：DevTools.
  mainWindow.webContents.openDevTools()
  // 永久隐藏菜单栏
  mainWindow.setMenu(null);
  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

mainWindow.loadFile('./index.html') 是打开当前index.html文件作为渲染进程的界面如果是用在线地址应该用mainWindow.loadURL("http://************");的方式代替

上面跑起来了项目并且也有了窗体打开在想要的位置第二屏，接下来是Node.js ws 模块使用

引入：

const WebSocketServer = require('ws').Server;

创建：

var Socket =new WebSocketServer({port: 10000});//10000为端口号

Socket.on监听connection连接事件在里面每一个socke客户端连接都会触发接下来就是记录进来的连接

 Socket.on('connection', (ws,req) => {

 });

例如我要A端向B端发消息这时候 A,B端都连接到这个socket服务端


   let ASocket =null
 Socket.on('connection', (ws,req) => {
     ASocket =ws //这里是收到了连接并记录下来 

     //下面要建立监听 接受A端消息
      ASocket.on('message', (message) => {
               // 接收到消息 反馈  这里可以判断B屏是否连接进来 连进来的话应该发给B屏的
            ASocket.send(JSON.stringify({type:0}))
       
      });
 });

上面是简单的例子创建一个浏览器窗口代码可以直接使用 socket只给了一个简要使用说明具体代码业务还需自己拿捏如果有有什么疑问欢迎留言