How to send/write and receive/read (BIDI) TCP/IP Data from Javascript

Product JSPrintManager Published 06/01/2023 Updated 06/01/2023 Author

Overview

JSPrintManager supports Bidirectional (BIDI) TCP/IP Communication from Javascript allowing you to Send/Write & Receive/Read data strings to any IP Address and Port reachable from the client system. Based on pure Javascript code, you can enable BIDI TCP/IP Comm on any web page (written on top of any Web Platform including ASP.NET MVC/CORE, PHP, Django, Ruby On Rails (RoR), Express.js, Angular, React, Vue).

IMPORTANT: The target IP Address requires to be in the client's allow list!

In this walkthrough, you'll learn how to Send/Write & Receive/Read data strings from Javascript through any IP Address and Port reachable from the client machine. This solution works with any popular browser like Chrome, Firefox, IE/Edge & Safari on Windows, Linux, Raspberry Pi and Mac systems!

Try JSPrintManager Online Demo!

Follow up these steps

  • JSPrintManager Client App

    Be sure you install in your dev machine JSPrintManager (JSPM) (Available for Windows, Linux, Raspberry Pi & Mac)

    IMPORTANT: This small app must be installed on each client!

  • HTML & Script References

    • Download JSPrintManager.js
    • Copy all of these *.js files to the same folder where the next index.html page sample will be located in.
    • By using your favorite Web Development IDE or Text Editor, create a new HTML file naming it index.html
      Copy/paste the following code inside that html file:

      
<!DOCTYPE html>
<html>

<head>
    <title>JSPrintManager</title>
    <meta charset="utf-8" />
</head>

<body>

    <div style="text-align:center">
        <h1>BIDI TCP/IP Comm from Javascript</h1>
        <hr />
        <div>
            <label>
                IP Address
                <input id="tcpAddress" value="10.0.0.1" />
            </label>
            <label>
                Port
                <input id="tcpPort" value="8001" />
            </label>
            <br /><br />
            <button type="button" onclick="doOpen();">
                Open
            </button>
              
            <button type="button" onclick="doClose();">
                Close
            </button>
        </div>
        <br /><br />
        <div>
            <label>
                <strong>Data to Send</strong>
                <input id="txtDataToSend" value="type here..." />
            </label>            
            <button onclick="doSendData();">Send...</button>
        </div>
        <hr />
        <div>
            <textarea id="txtDataReceived" readOnly style="background-color:#302a2a;color:#fff;font-family: 'Courier New', Courier, monospace;" cols="100" rows="10"></textarea>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <!--IMPORTANT: BE SURE YOU HONOR THIS JS LOAD ORDER-->
    
    <script src="JSPrintManager.js"></script>
    
    
    

    <script>

        var _tcpComm = null;
        var _dataToSend = '';
        var _dataReceived = '';
        var _this = this;

        //JSPrintManager WebSocket settings
        JSPM.JSPrintManager.auto_reconnect = true;
        JSPM.JSPrintManager.start();
        
        //Check JSPM WebSocket status
        function jspmWSStatus() {
            if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Open)
                return true;
            else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Closed) {
                console.warn('JSPrintManager (JSPM) is not installed or not running! Download JSPM Client App from https://neodynamic.com/downloads/jspm');
                return false;
            }
            else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Blocked) {
                alert('JSPM has blocked this website!');
                return false;
            }
        }

        //Sending data to port
        function doSendData() {
            if (!this._tcpComm) {
                this._dataReceived += "TCP Comm is not created!\r\n";
                this.refreshDisplay();
            } else {
                this._dataToSend = $('#txtDataToSend').val();
                if (this._dataToSend.length > 0) {
                    this._tcpComm.send(this._dataToSend);
                    this._dataReceived += "> " + this._dataToSend + "\r\n";
                    this.refreshDisplay();
                }
            }
        }

        function doOpen() {
            this._tcpComm = new JSPM.TcpComm($('#tcpAddress').val(), parseInt($('#tcpPort').val()));

            this._tcpComm.onDataReceived = function (data) {
                _this.dataReceived += "< " + data + "\r\n";
                console.log("Data Received:" + data);
                _this.refreshDisplay();
            };

            this._tcpComm.onError = function (data, is_critical) {
                _this.dataReceived += "ERROR: " + data + "\r\n";
                console.log("Error: " + data);
                _this.refreshDisplay();
            };

            this._tcpComm.onClose = function (data) {
                _this.dataReceived += "COMM CLOSED!" + "\r\n";
                console.log("Closed: " + data);
                _this.refreshDisplay();
            };

            this._tcpComm.open().then(_ => {
                _this.dataReceived += "COMM OPEN!" + "\r\n";
                _this.refreshDisplay();
            });
        }

        function doClose() {
            if (!this._tcpComm) {
                this._dataReceived += "TCP Comm is not open!\r\n";
                this.refreshDisplay();
            } else
                this._tcpComm.close();
        }

        function refreshDisplay() {
            $('#txtDataReceived').val(this._dataReceived);
        }

    </script>
</body>

</html>

  • That's it! Run your website and test it.
Try JSPrintManager Online Demo!


Useful? Share it!

Related Articles

  Advanced Silent PDF Printing with Tray, Paper Size, Rotation & Pages Range Settings from Javascript
  How to print raw commands from Web APIs, WebServices, Remote and Local files with Javascript

Need help? Contact Support

We provide best-in-class customer service and support directly from members of our dev team! If we are available when you contact us, you will get a response in few minutes; otherwise the maximum turnaround is 24hs in most cases.