脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue electron

Vue electron前端开启局域网接口实现流程详细介绍

 更新时间：2022年10月20日 14:05:50   作者：DDDHL_  
用electron写了一个自己用的小软件，无后端，纯本地的数据。最近想着开发一个手机端app，将PC端的数据进行同步。为了这小小的功能单独写个后端又麻烦。干脆前后端不分离哈哈，直接在前端软件中开启接口

一、主要实现原理

electron本身就集成了Nodejs，简直是不要太舒服。直接用最基本的http模块开接口即可，也可以用express，看个人喜好。下面演示的是http模块。

二、获取本机局域网IP

首先要获取本机局域网的IP，这就是接口的IP地址了。

// 获取本机的局域网IP
function getServerIp() {
  let interfaces = os.networkInterfaces();
  for (let devName in interfaces) {
    let iface = interfaces[devName];
    for (let i = 0; i < iface.length; i++) {
      let alias = iface[i];
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
        return alias.address;
      }
    }
  }
}

三、开启服务器

这里的closeSever()是防止服务被重新开启导致冲突报错。一般来说开启服务器后，前端要做限制。

// 开启局域网接口
function openServer(): Promise<string> {
  // 防止重复开启
   closeServer()
  // 获取本机的局域网IP和自定义端口
  let SERVER_PORT = 65526
  let SERVER_IP = getServerIp()
  server = http.createServer()
  server.on('request', (req: any, res: any) => {
    // 防止跨域
    res.writeHead(200, { "Content-Type": "application/json;charset=utf-8", "access-control-allow-origin": "*" })
    // 监听 '/api/authentication'
    if (req.method === 'POST' && req.url === '/api/authentication') {
      let context = {
        code: 200,
        data: { type: 'Hello World!' }
      }
      res.end(JSON.stringify(context))
    }
  })
  // 返回端口开启结果
  return new Promise<string>((resolve, reject) => {
    server.listen(SERVER_PORT, SERVER_IP, () => {
      // 服务器正确开启
      resolve(`服务器开启成功，服务器地址: http://${SERVER_IP}:${SERVER_PORT}`)
    })
    server.on('error', (err: any) => {
      if (err.code === 'EADDRINUSE') {
        // 服务器端口已经被使用
        reject(`端口:${SERVER_PORT}被占用,请更换占用端口`)
      }
    })
  })
}

四、关闭服务器

这里有个小坑，如果单纯通过 server.close() 关闭服务，重复开关10次后会出警告。大致意思是监听端口过多，解决办法是关闭服务器时将监听也移除。

// 关闭server
function closeServer(): void {
  server && server.removeAllListeners();
  server && server.close(() => {
    console.log("服务接口关闭");
  });
}

五、简单演示

局域网内设备都可以访问接口，已测试手机APP访问接口成功，要注意跨域问题。

六、整体代码

server.ts

const os = require('os');
const http = require('http')
let server: any
// 开启局域网接口
function openServer(): Promise<string> {
  // 防止重复开启
  closeServer()
  // 获取本机的局域网IP和自定义端口
  let SERVER_PORT = 65526
  let SERVER_IP = getServerIp()
  server = http.createServer()
  server.on('request', (req: any, res: any) => {
    // 防止跨域
    res.writeHead(200, { "Content-Type": "application/json;charset=utf-8", "access-control-allow-origin": "*" })
    // 监听 '/api/authentication'
    if (req.method === 'POST' && req.url === '/api/authentication') {
      let context = {
        code: 200,
        data: { type: 'Hello World!' }
      }
      res.end(JSON.stringify(context))
    }
  })
  // 返回端口开启结果
  return new Promise<string>((resolve, reject) => {
    server.listen(SERVER_PORT, SERVER_IP, () => {
      // 服务器正确开启
      resolve(`服务器开启成功，服务器地址: http://${SERVER_IP}:${SERVER_PORT}`)
    })
    server.on('error', (err: any) => {
      if (err.code === 'EADDRINUSE') {
        // 服务器端口已经被使用
        reject(`端口:${SERVER_PORT}被占用,请更换占用端口`)
      }
    })
  })
}
// 关闭server
function closeServer(): void {
  server && server.removeAllListeners();
  server && server.close(() => {
    console.log("服务接口关闭");
  });
}
// 获取本机的局域网IP
function getServerIp() {
  let interfaces = os.networkInterfaces();
  for (let devName in interfaces) {
    let iface = interfaces[devName];
    for (let i = 0; i < iface.length; i++) {
      let alias = iface[i];
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
        return alias.address;
      }
    }
  }
}
export {
  openServer,
  closeServer
}

七、展望

如果想把接口开放到外网，我目前只知道用路由器本机地址内网穿透。不过挺麻烦，小软件不需要这么多需求。还有，我想问下uniapp能否像这个一样在前端开启接口？

到此这篇关于Vue electron前端开启局域网接口实现流程详细介绍的文章就介绍到这了,更多相关Vue electron内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue预览本地pdf文件方法之vue-pdf组件使用

    vue预览本地pdf文件方法之vue-pdf组件使用

    这篇文章主要介绍了vue预览本地pdf文件方法之vue-pdf组件使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue配置别名alias在webstorm不生效问题及解决

    vue配置别名alias在webstorm不生效问题及解决

    这篇文章主要介绍了vue配置别名alias在webstorm不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue el-table表头上引入组件不能实时传参解决方法分析

    Vue el-table表头上引入组件不能实时传参解决方法分析

    这篇文章主要介绍了Vue el-table表头上引入组件不能实时传参解决方法，总的来说这并不是一道难题，那为什么要拿出这道题介绍？拿出这道题真正想要传达的是解题的思路，以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路
    2022-11-11
  • vue中如何监听url地址栏参数变化

    vue中如何监听url地址栏参数变化

    这篇文章主要介绍了vue中如何监听url地址栏参数变化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • 关于json-bigint处理大数字问题

    关于json-bigint处理大数字问题

    这篇文章主要介绍了关于json-bigint处理大数字问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vue中的keep-alive用法指南

    vue中的keep-alive用法指南

    keep-alive是Vue中的一个内置组件,用于缓存非活动组件实例,避免重复渲染,优化性能,本文给大家介绍vue中的keep-alive用法指南,感兴趣的朋友一起看看吧
    2024-10-10
  • vue配置根目录详细步骤(用@代表src目录)

    vue配置根目录详细步骤(用@代表src目录)

    vue用@表示src文件夹，引入时找文件路径更方便,下面这篇文章主要给大家介绍了关于vue配置根目录(用@代表src目录)的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Vue.js在使用中的一些注意知识点

    Vue.js在使用中的一些注意知识点

    这篇文章主要给大家介绍了Vue.js在使用中的一些注意知识点，文中介绍的非常详细，对大家学习或者使用Vue.js具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-04-04
  • Vue3使用Proxy实现数据监听的原因分析

    Vue3使用Proxy实现数据监听的原因分析

    在本篇文章里小编给大家整理的是一篇关于Vue3使用Proxy实现数据监听的原因分析内容，有需要的朋友们可以跟着学习参考下。
    2021-11-11
  • 使用Plotly.js在Vue中创建交互式散点图的示例代码

    使用Plotly.js在Vue中创建交互式散点图的示例代码

    Plotly.js是一个功能强大的JavaScript库,用于创建交互式数据可视化,它支持各种图表类型,包括散点图、折线图和直方图,在Vue.js应用程序中,Plotly.js可用于创建动态且引人入胜的数据可视化,本文介绍了使用Plotly.js在Vue中创建交互式散点图,需要的朋友可以参考下
    2024-07-07

最新评论