Vue electron前端開啟局域網接口實現(xiàn)流程詳細介紹

更新時間：2022年10月20日 14:05:50 作者：DDDHL_

用electron寫了一個自己用的小軟件，無后端，純本地的數(shù)據(jù)。最近想著開發(fā)一個手機端app，將PC端的數(shù)據(jù)進行同步。為了這小小的功能單獨寫個后端又麻煩。干脆前后端不分離哈哈，直接在前端軟件中開啟接口

一、主要實現(xiàn)原理

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": "*" })
    // 監(jiān)聽 '/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次后會出警告。大致意思是監(jiān)聽端口過多，解決辦法是關閉服務器時將監(jiān)聽也移除。

// 關閉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": "*" })
    // 監(jiān)聽 '/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前端開啟局域網接口實現(xiàn)流程詳細介紹的文章就介紹到這了,更多相關Vue electron內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue如何將base64流數(shù)據(jù)轉成pdf文件并在新頁面打開
這篇文章主要介紹了vue如何將base64流數(shù)據(jù)轉成pdf文件并在新頁面打開問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
vue實現(xiàn)zip文件下載
這篇文章主要為大家詳細介紹了vue實現(xiàn)zip文件下載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
checkbox在vue中的用法小結
之前對于vue中用到過的checkbox也只是別人寫好的組件，這次在自己實現(xiàn)時走了很多坑，特意寫這篇文章記錄到腳本之家平臺，供大家參考
2018-11-11
Vue.js組件間通信方式總結【推薦】
組件之間通信分為三種：父-子；子-父；跨級組件通信。下面，就組件間如何通信做一些總結。需要的朋友可以參考下
2018-11-11
VSCode搭建vue項目的實現(xiàn)步驟
本文主要介紹了VSCode搭建vue項目的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
Vue中的table表單切換實現(xiàn)效果
這篇文章主要介紹了Vue中的table表單切換實現(xiàn)效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue3子組件向父組件傳值的兩種實現(xiàn)方式
近期學習vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2的并沒有太大的區(qū)別,這篇文章主要給大家介紹了關于Vue3子組件向父組件傳值的兩種實現(xiàn)方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-04-04
vuex直接賦值的三種方法總結
今天小編就為大家分享一篇vuex直接賦值的三種方法總結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
在elementui中Notification組件添加點擊事件實例
這篇文章主要介紹了在elementui中Notification組件添加點擊事件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue?如何刪除數(shù)組中的某一條數(shù)據(jù)
這篇文章主要介紹了vue?如何刪除數(shù)組中的某一條數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08