网页js通过webSocket与c#应用程序通讯实现本地打印小票功能。

最新推荐文章于 2025-08-04 14:52:56 发布

原创

最新推荐文章于 2025-08-04 14:52:56 发布 · 4.8k 阅读

29 ·

CC 4.0 BY-SA版权

效果展示：

在这里插入图片描述

需求描述：

具体实现

开发环境：
一、 .net 4.7.1
二、 vs2019

网页js测试代码(复制即可用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        button {
            width: 350px;
            height: 32px;
            background: #00F7DE;
            border: none;
            outline: none;
            color: #000;
            font-size: 10pt;
            font-weight: 600;
            border-radius: 3px;
            cursor: pointer;
        }

        button:hover {
            background: #00cccc;
        }
    </style>
</head>
<body style="padding: 1.3rem">
<button>发送打印</button>
</body>

<script>
    //      ip: 'ws://127.0.0.1:7081',
    let dataList = [];
    dataList.push({name: "小辣椒", number: 12});
    dataList.push({name: "西瓜", number: 10});
    dataList.push({name: "粉皮", number: 14});
    dataList.push({name: "薯片", number: 17});
    dataList.push({name: "鸡枞菌", number: 20});
    dataList.push({name: "牛肝菌", number: 38});
    dataList.push({name: "虎皮鸡蛋", number: 22});
    let printeData = {
        address: "广东佛山xx街道zz号",
        datas: dataList
    };


    var ws = new WebSocket("ws://127.0.0.1:7081");//创建一个实例

    ws.onopen = function (evt) {//用于指定连接成功后的回调函数
        console.log("Connection open ...");
    };


    ws.onclose = function (event) {//用于指定连接关闭后的回调函数
        var code = event.code;
        var reason = event.reason;
        var wasClean = event.wasClean;
    };

    ws.onmessage = function (event) {//用于指定收到服务器数据后的回调函数
        var data = event.data;
    };

    $('button').on('click', function () {
        if (ws.readyState !== 1) {
            console.log('链接未打开');
            return false;
        }
        ws.send(JSON.stringify(printeData));
    });


</script>
</html>