How to Connect Web Apps to IC and RFID Devices via WebSocket and Desktop Plugins

Background : The company needs a web‑based solution to interact with IoT devices such as smart IC cards and contactless RFID tags. The document focuses on these two device types and outlines a three‑tier architecture (web, desktop plug‑in, server).

Implementation Idea

The web client cannot directly access hardware, so a local WebSocket service is started. A desktop plug‑in listens on the WebSocket port, performs read/write operations on the IC/RFID devices, and returns the results to the web page.

Flowchart

Preparation Measures

Node.js v14.16.0 for the front‑end.

Desktop plug‑in dependencies.

IC card (read/write, vehicle use) and RFID tag (read/write, documents, vehicle, driver).

Communication Method

WebSocket is used for data exchange. The desktop plug‑in listens on a predefined port (e.g., ws://127.0.0.1:32002) and communicates with the web client.

Hardware Operations

Web Front‑End Code

export default {
  data() {
    return {
      WebSocketUrl: 'ws://127.0.0.1:32002',
      websocket: null,
      websocketCount: 0,
    }
  },
  created() {
    this.initWebSocket();
  },
  methods: {
    initWebSocket() {
      if (typeof (WebSocket) === "undefined") {
        this.$message.warning('您的浏览器不支持websocket');
      } else {
        this.websocket = new WebSocket(this.WebSocketUrl);
        this.websocket.onopen = this.websocketOpen;
        this.websocket.onerror = this.websocketError;
        this.websocket.onmessage = this.webSocketGetMessage;
      }
    },
    websocketOpen() { return true; },
    isConnnet(){ console.log(this.websocket.readyState); return this.websocket.readyState; },
    websocketError() {
      this.websocketCount++;
      if (this.websocketCount <= 30) {
        this.websocket = null;
        this.initWebSocket();
      } else {
        console.warn("websocket链接失败,请刷新页面重新连接");
      }
    },
    webSocketGetMessage(e) {
      if (e && e.data) {
        let responseData = JSON.parse(e.data);
        if (responseData.code === '0000') {
          this.responseData(responseData);
        } else {
          this.$message.error(responseData.msg);
        }
      }
    },
    responseData(responseData){},
    websocketSendMessage(message) { this.websocket.send(message); },
    webSocketclose() { this.websocket = null; },
  },
  beforeDestroy() {
    this.webSocket = null;
    this.EVENT_BUS.$off('websocketNews');
  }
}

Desktop Plug‑In Code (C#)

RFID Write Card

public Message WriteRfidCard(string strinner)
{
    int port = 0;
    byte fComAdr = 255;
    byte fBaud = 5;
    int fCmdRet = 30;
    int CardNum = 0;
    int Totallen = 0;
    byte[] EPC = new byte[5000];
    byte AdrTID = 0;
    byte LenTID = 0;
    byte TIDFlag = 0;
    if (openresult != 0)
    {
        openresult = StaticClassReaderB.AutoOpenComPort(ref port, ref fComAdr, fBaud, ref frmcomportindex);
    }
    if (openresult != 0)
    {
        Invoke_LogWrite("串口打开失败!");
        return new Message { Sign = "1", Code = "ER01", Msg = "串口打开失败!请检查RFID卡设备是否正常连接!" };
    }
    fCmdRet = StaticClassReaderB.Inventory_G2(ref fComAdr, AdrTID, LenTID, TIDFlag, EPC, ref Totallen, ref CardNum, frmcomportindex);
    if ((fCmdRet == 1) | (fCmdRet == 2) | (fCmdRet == 3) | (fCmdRet == 4) | (fCmdRet == 0xFB))
    {
        byte[] daw = new byte[Totallen];
        Array.Copy(EPC, daw, Totallen);
        string inner = strinner;
        inner = ToHex(inner, false);
        int ferrorcode = -1;
        byte WriteEPClen = Convert.ToByte(inner.Length / 2);
        byte ENum = Convert.ToByte(inner.Length / 4);
        byte[] EPCs = HexStringToByteArray(inner);
        byte[] fPassWord = HexStringToByteArray("00000000");
        fCmdRet = StaticClassReaderB.WriteEPC_G2(ref fComAdr, fPassWord, EPCs, WriteEPClen, ref ferrorcode, frmcomportindex);
        if (fCmdRet == 0)
        {
            return new Message { Sign = "1", Code = "0000", Msg = "写卡成功!" };
        }
    }
    return new Message { Sign = "1", Code = "ER03", Msg = "寻卡失败!请检查RFID卡设备是否正常连接后将RFID卡靠近设备" };
}

Similar C# methods are provided for RFID read, IC card write, and IC card read, each handling device initialization, authentication, data conversion, and error handling.

Server Communication

The card data is sent to the back‑end via the documented API (e.g., http://torna.tz.com ) to bind card numbers with vehicles and drivers.

Problem Summary

WebSocket may fail to connect to the device.

Device type mismatches (e.g., vehicle only supports certain RFID cards).

Re‑connect devices and verify card‑device compatibility.

Conclusion

The three‑tier solution (web, desktop plug‑in, server) satisfies current business needs with minimal cost, though it requires desktop plug‑in installation and constant hardware monitoring. A future browser‑native plug‑in could improve user experience but would increase development complexity.