快捷導(dǎo)航

Vue electron前端開啟局域網(wǎng)接口實(shí)現(xiàn)流程詳細(xì)介紹

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

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

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

electron本身就集成了Nodejs，簡(jiǎn)直是不要太舒服。直接用最基本的http模塊開接口即可，也可以用express，看個(gè)人喜好。下面演示的是http模塊。

二、獲取本機(jī)局域網(wǎng)IP

首先要獲取本機(jī)局域網(wǎng)的IP，這就是接口的IP地址了。

// 獲取本機(jī)的局域網(wǎng)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;
      }
    }
  }
}

三、開啟服務(wù)器

這里的closeSever()是防止服務(wù)被重新開啟導(dǎo)致沖突報(bào)錯(cuò)。一般來說開啟服務(wù)器后，前端要做限制。

// 開啟局域網(wǎng)接口
function openServer(): Promise<string> {
  // 防止重復(fù)開啟
   closeServer()
  // 獲取本機(jī)的局域網(wǎng)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))
    }
  })
  // 返回端口開啟結(jié)果
  return new Promise<string>((resolve, reject) => {
    server.listen(SERVER_PORT, SERVER_IP, () => {
      // 服務(wù)器正確開啟
      resolve(`服務(wù)器開啟成功，服務(wù)器地址: http://${SERVER_IP}:${SERVER_PORT}`)
    })
    server.on('error', (err: any) => {
      if (err.code === 'EADDRINUSE') {
        // 服務(wù)器端口已經(jīng)被使用
        reject(`端口:${SERVER_PORT}被占用,請(qǐng)更換占用端口`)
      }
    })
  })
}

四、關(guān)閉服務(wù)器

這里有個(gè)小坑，如果單純通過 server.close() 關(guān)閉服務(wù)，重復(fù)開關(guān)10次后會(huì)出警告。大致意思是監(jiān)聽端口過多，解決辦法是關(guān)閉服務(wù)器時(shí)將監(jiān)聽也移除。

// 關(guān)閉server
function closeServer(): void {
  server && server.removeAllListeners();
  server && server.close(() => {
    console.log("服務(wù)接口關(guān)閉");
  });
}

五、簡(jiǎn)單演示

局域網(wǎng)內(nèi)設(shè)備都可以訪問接口，已測(cè)試手機(jī)APP訪問接口成功，要注意跨域問題。

六、整體代碼

server.ts

const os = require('os');
const http = require('http')
let server: any
// 開啟局域網(wǎng)接口
function openServer(): Promise<string> {
  // 防止重復(fù)開啟
  closeServer()
  // 獲取本機(jī)的局域網(wǎng)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))
    }
  })
  // 返回端口開啟結(jié)果
  return new Promise<string>((resolve, reject) => {
    server.listen(SERVER_PORT, SERVER_IP, () => {
      // 服務(wù)器正確開啟
      resolve(`服務(wù)器開啟成功，服務(wù)器地址: http://${SERVER_IP}:${SERVER_PORT}`)
    })
    server.on('error', (err: any) => {
      if (err.code === 'EADDRINUSE') {
        // 服務(wù)器端口已經(jīng)被使用
        reject(`端口:${SERVER_PORT}被占用,請(qǐng)更換占用端口`)
      }
    })
  })
}
// 關(guān)閉server
function closeServer(): void {
  server && server.removeAllListeners();
  server && server.close(() => {
    console.log("服務(wù)接口關(guān)閉");
  });
}
// 獲取本機(jī)的局域網(wǎng)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
}

七、展望

如果想把接口開放到外網(wǎng)，我目前只知道用路由器本機(jī)地址內(nèi)網(wǎng)穿透。不過挺麻煩，小軟件不需要這么多需求。還有，我想問下uniapp能否像這個(gè)一樣在前端開啟接口？

到此這篇關(guān)于Vue electron前端開啟局域網(wǎng)接口實(shí)現(xiàn)流程詳細(xì)介紹的文章就介紹到這了,更多相關(guān)Vue electron內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: