Websocket通信实战项目(js)(图片互传应用)（下）客户端H5+css+js实现

                               
  Rqtz : 个人主页
​   共享IT之美，共创机器未来    
  Sharing the Beauty of IT and Creating the Future of Machines Together

目录

 

起始 

客户端GUI

Javascripts连接websocket

使用localStorage保存用户输入的IP

Websocket连接成功

Websocket接收数据

解析发来的图片二进制数据

根据字节头判断文件格式

根据图片二进制数据在前端显示图片

websocket连接关闭

webscoket连接错误

整体代码

websocket发送图片数据

选择文件

读取文件

保存发来的图片

webocket断开连接

整体代码框架

最后


 

起始 

         基于上篇文章，我介绍了websocket图传软件服务器端实现，那么本篇文章要介绍的是websocket的客户端实现 ，主要使用javascripts来实现通信部分和后端逻辑，前端h5+css来实现，为什么用javascripts呢？因为主要是为了能在安卓平台使用，由于不会安卓开发，哈哈，能力有限，只能用javascripts在浏览器上用了，虽然兼容不太好，但毕竟是个小练习吧，正好练习以下javacsripts语法.

服务器端实现请看Websocket通信实战项目(图片互传应用)+PyQt界面+python异步编程(async) （上）服务器端python实现-CSDN博客
​

客户端GUI

动图展示

视频 图片互传-CSDN直播

Javascripts连接websocket

var socket;
socket = new WebSocket('ws://'+ip+':8899/handler');
  1. socket 定义为一个全局变量，创建一个新的WebSocket对象

  2. 'ws://': 这是WebSocket协议的前缀，表示这是一个WebSocket连接。

  3. ip: 这是一个变量，表示WebSocket服务器的IP地址，他通过一个输入框的value获取。

  4. ':8899': 这是WebSocket服务器监听的端口号。在这个例子中，端口号是8899。你可以根据实际情况更改端口号。

  5. '/handler': 这是WebSocket服务器上的特定路径，通常用于处理客户端发送的消息。在这个例子中，路径是/handler。如上篇文章的handler。

使用localStorage保存用户输入的IP

  • 定义 ：localStorage 是 Web Storage API 的一部分，它允许网页在用户的浏览器上存储键值对数据。这些数据会持久存在，即使用户关闭浏览器或重启电脑，数据也不会丢失。
  • 方法一 localStorage.setItem(键, 值); 设置键值对
  • 方法二 value=localStorage.getItem("键");通过访问键，进而得到其值存储到变量

代码示例

if(localStorage.getItem("ipaddress"))
    ipaddr.value=localStorage.getItem("ipaddress");
//使用localstorage设置默认IP地址
const moren = document.getElementById("moren");
moren.addEventListener("click",function(){
    if(ipaddr.value=="")
        alert("请输入IP地址");
    else    
    {
        localStorage.setItem("ipaddress", ipaddr.value);
        alert("设置成功");
    }
});

Websocket连接成功

socket.addEventListener('open', (event) => {
            dataval.value += 'WebSocket连接成功!\n';
            fengche.style.animation = 'fengche 2s linear infinite';
            commuction.innerHTML = "通信运行中";

            });
  1. 通过向socket添加一个open事件，监听websocket的是否连接成功
  2. dataval 是一哦个textarea 用于输出相关信息
  3. fengche 是指连接成功后，小风车会有一个旋转动画
  4. commuction 修改通信状态。

Websocket接收数据

 socket.addEventListener('message', (event) => {
            dataval.value+='图片接收成功\n';
            });

通过向socket添加一个message事件，监听websocket的发数据事件

解析发来的图片二进制数据

dataval.value+='图片接收成功\n';
//将blob对象赋值给变量
rece_picblob = event.data;
const reader = new FileReader();
//以arraybutter的形式读取blob数据
reader.readAsArrayBuffer(event.data);
reader.onloadend = function() {
    //获取blob的arraybuffer对象
    const arraybuffer = this.result;
    //转换为uint8Array
    const uint8Array = new Uint8Array(arraybuffer);
    // 检查前两个字节是否符合 JPG 文件的特征
    if (uint8Array[0] === 0xFF && uint8Array[1] === 0xD8) {
        jpgflag = true;
        type.value = "image/jpg";
    }
    // 检查前两个字节是否符合 PNG 文件的特征
    else if (uint8Array[0] === 0x89 && uint8Array[1] === 0x50) {
        pngflag = true;
        type.value = "image/png";
    }
    else if (uint8Array[0] === 0x42 && uint8Array[1] === 0x4D) {
        bmpflag = true;
        type.value = "image/bmp";
    }
   
}
  1. Blob对象 定义： Blob对象是JavaScript中的一个内置对象，用于处理二进制数据。它表示一段不可变的原始数据，可以存储大量的二进制数据，如图像、音频、视频等。
  2. event.data        这里的event.data是一个Blob对象，因为服务器端发来的数据是一个图片的二进制数据，所以event.data是一个Blob对象；如果服务器发来的是文本数据，那么event.data是一个字符串。

  3. FileReader读取文件  以下是FileReader的一些常用方法：

    1. readAsArrayBuffer(blob)：以ArrayBuffer的形式读取指定的Blob或File对象。
    2. readAsBinaryString(blob)：以二进制字符串的形式读取指定的Blob或File对象。
    3. readAsDataURL(blob)：以数据URL的形式读取指定的Blob或File对象。
    4. readAsText(blob, encoding)：以文本的形式读取指定的Blob或File对象，可以指定字符编码。
根据字节头判断文件格式
  •  const uint8Array = new Uint8Array(arraybuffer);

    将 ArrayBuffer 转换为 Uint8Array

  • JPG，PNG，BMP文件格式在其二进制两个字节的体现

    • image/jpg : 0xFF 0xD8

    • image/png : 0x89 0x50

    • image/bmp: 0x42 0x4D

根据图片二进制数据在前端显示图片

效果

//读取URL,赋值给image的src属性，显示图片
            const url = URL.createObjectURL(event.data);
            //将URL存入到其中的src属性
            currimagedata.src = url;
            //图片读取完成后，计算相关属性
            currimagedata.onload = function() {
                var width = currimagedata.width;
                var height = currimagedata.height;
                px.value = width+"x"+height+"px";
                ram.value = rece_picblob.size+"字节";
                nameval.value = "";
                
                //scale倍缩放
                photos.width = currimagedata.width / scale;
                photos.height = currimagedata.height / scale;
                photos.src = url;
            }
  1. 使用createObjectURL方法将当前的blob对象，也就是图片的二进制数据转为URL格式，目的是将其设置到img标签的src属性来显示图片。
  2. currimagedata是一个image对象 ， 定义为var currimagedata = new Image()
  3. currimagedata.onload = function()

    是一个事件处理函数，在图像数据读取完成后触发

  4. 图片读取完成后，通过其width，height以及blob(rece_picblob)对象的size方法，将图片的详细数据设置到数据框中.
  5. 等比缩放 使用一个变量读取完数据后，pthots是个img标签，scale缩放倍数，初始值为2.5，可以根据select标签选择，最后再将缩放后的宽高数据，设置为图片标签的src属性，这样就达到了先获取图片原始数据，在将缩放后数据设置为图片。
  6. 缩放倍数html 
    <select id="selectment">
     <option value="option1">2.5</option>
     <option value="option2">1.5</option>
     <option value="option3">0.5</option>
</select>

    Javascripts

    //选择缩放倍数
const select = document.getElementById("selectment")
select.addEventListener("change",function(){
    if(select.value == "option1"){scale = 2.5;photos.width = currimagedata.width / scale;photos.height = currimagedata.height / scale;}
    else if(select.value == "option2"){scale = 1.5;photos.width = currimagedata.width / scale;photos.height = currimagedata.height / scale;}
    else if(select.value == "option3"){scale = 0.5;photos.width = currimagedata.width / scale;photos.height = currimagedata.height / scale;}
});
websocket连接关闭
 //连接关闭，小风车转起来
        socket.addEventListener('close', (event) => {
            dataval.value += 'WebSocket连接关闭\n';
            fengche.style.animation = 'fengche 2s linear';
            commuction.innerHTML = "通信关闭中";
        });
webscoket连接错误
       socket.addEventListener('error', (event) => {
            dataval.value +='WebSocket错误：'+ event.data+"\n";
        });
整体代码
WebSocketbtn.addEventListener("click",function(){
    console.log(ip)
    if(ipaddr.value =="" || ip == "" )
        alert("请输入IP地址或绑定ip");
    else
    {
        socket = new WebSocket('ws://'+ip+':8899/handler');
    //连接成功，小风车转起来
        socket.addEventListener('open', (event) => {
            dataval.value += 'WebSocket连接成功!\n';
            fengche.style.animation = 'fengche 2s linear infinite';
            commuction.innerHTML = "通信运行中";

            });
    //接收服务器发来的图片数据
        socket.addEventListener('message', (event) => {
            dataval.value+='图片接收成功\n';
            //将blob对象赋值给变量
            rece_picblob = event.data;
            const reader = new FileReader();
            //以arraybutter的形式读取blob数据
            reader.readAsArrayBuffer(event.data);
            reader.onloadend = function() {
                //获取blob的arraybuffer对象
                const arraybuffer = this.result;
                //转换为uint8Array
                const uint8Array = new Uint8Array(arraybuffer);
                console.log(uint8Array)
                // 检查前两个字节是否符合 JPG 文件的特征
                if (uint8Array[0] === 0xFF && uint8Array[1] === 0xD8) {
                    jpgflag = true;
                    type.value = "image/jpg";
                }
                // 检查前两个字节是否符合 PNG 文件的特征
                else if (uint8Array[0] === 0x89 && uint8Array[1] === 0x50) {
                    pngflag = true;
                    type.value = "image/png";
                }
                else if (uint8Array[0] === 0x42 && uint8Array[1] === 0x4D) {
                    bmpflag = true;
                    type.value = "image/bmp";
                }
               
            }
            
           
            //读取URL,赋值给image的src属性，显示图片
            const url = URL.createObjectURL(event.data);
            //将URL存入到其中的src属性
            currimagedata.src = url;
            //图片读取完成后，计算相关属性
            currimagedata.onload = function() {
                var width = currimagedata.width;
                var height = currimagedata.height;
                px.value = width+"x"+height+"px";
                ram.value = rece_picblob.size+"字节";
                nameval.value = "";
                
                //scale倍缩放
                photos.width = currimagedata.width / scale;
                photos.height = currimagedata.height / scale;
                photos.src = url;
            }
        });
    //连接关闭，小风车转起来
        socket.addEventListener('close', (event) => {
            dataval.value += 'WebSocket连接关闭\n';
            fengche.style.animation = 'fengche 2s linear';
            commuction.innerHTML = "通信关闭中";
        });
    //连接错误
        socket.addEventListener('error', (event) => {
            dataval.value +='WebSocket错误：'+ event.data+"\n";
        });
    }
    });

websocket发送图片数据

选择文件
//选择文件，单击div连接到file类型input
selfilebtn.addEventListener("click",function(){
    document.getElementById("fileinput").click();
});

通过给div设置点击事件，并且连接到input文件选择框，这个div指的是发送图片的那个圆角矩形。

读取文件
//读取文件
fileInput.addEventListener('change',function(event){
    const files = event.target.files;
    var file = files[0];
    
    if(file.size>7000000)
        alert("图片文件不能超过7MB")
    else
    {
        //将文件信息显示在输入框
        ram.value = file.size+"字节";
        nameval.value = file.name;
        type.value = file.type;
        //创建读文件对象
        const reader = new FileReader();
        const reader2 = new FileReader();
        //读取文件内容，二进制格式
        reader.readAsArrayBuffer(file);
         //读取文件内容，URL格式
        reader2.readAsDataURL(file);
        //二进制格式读取完成后触发
        reader.onload = function(e) {
            //获取文件内容
            const filedata = e.target.result;
            // console.log(filedata)
            //发送消息
            sendMessage(filedata);
        };
        //URL格式读取完成后触发
        reader2.onload = function(e) {
                const picdata = e.target.result;
                //创建一个图像对象
                //将URL存入到其中的src属性
                currimagedata.src = picdata;
                //图片读取完成后
                currimagedata.onload = function() {
                    var width = currimagedata.width;
                    var height = currimagedata.height;
                    px.value = width+"x"+height+"px";
                    //scale倍缩放
                    photos.width = currimagedata.width / scale;
                    photos.height = currimagedata.height / scale;
                    photos.src = picdata;
                }
            }
    }
  • 监听input文件输入框的change事件
  • var file = files[0];

    由于文件是单选的，所以就之选取了选择的第一个文件。

  • 获取文件属性

    • file.size  文件大小 （字节）

    • file.name 文件名称

    • file.type  文件类型

    • file.width 图片宽度

    • file.height 图片高度

  •   reader.onload = function(e) {
            //获取文件内容
            const filedata = e.target.result;
            // console.log(filedata)
            //发送消息
            sendMessage(filedata);
        };

    等待读取完成后，将二进制数据发送

  • sendmessage函数实现

    //websocket发送消息函数
function sendMessage(message) {
    socket.send(message);
    dataval.value+="图片发送成功!\n";
 };

    其实就是使用websocket对象socket使用send方法发送。

保存发来的图片

//保存图片
sendpic.addEventListener("click",function(){
    if(rece_picblob.size == 0)
        alert("当前没有受到服务器发来的任何数据")
    else
    {
        if(pngflag)
        {
            saveAs(rece_picblob,"output.png");
            pngflag = false;
        }
        else if(jpgflag)
        {
            saveAs(rece_picblob,"output.jpg");
            jpgflag = false;
        }
        else if(bmpflag)
        {
            saveAs(rece_picblob,"output.bmp");  
            bmpflag = false;
        }
        dataval.value+='图片保存成功\n';
        
    }
    
});

根据不同的图片格式保存相应的图片。

但是在电脑端测试的时候，保存图片就会刷新页面，手机就不会，可是我并没有写刷新页面的代码，这个bug就很奇怪。

其中saveAs()方法，使用的是FileSaver.js，在html中引入

<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js"></script>

使用saveAs()方法

  • 参数1：是一个Blob对象，这里是图片的二进制数据
  • 参数2：是保存的文件名，这里是output.png/jpg/bmp

webocket断开连接

disWebSocketbtn.addEventListener('click',function(){
    socket.close();
});

整体代码框架

最后

由于这个项目是小弟初次接触websocket的小项目，可能有写的不好的地方，如有错误请大佬及时批评指正，小弟感激不尽！

7f1ef757c074450595905c3a5ab92b2f.png

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/770764.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Linux】正确的关机方法

【Linux】正确的关机方法

1. Linux正确的关机方式 如何关机呢&#xff1f;我想&#xff0c;很多朋友在DOS年代已经有在玩计算机了。在当时我们关闭DOS的系统时&#xff0c;常常是直接关闭电源开关&#xff0c;而Windows 在你不爽的时候&#xff0c;按着电源开关四秒也可以关机&#xff0c;但是在Linux则…
阅读更多...
旧衣回收小程序：减少资源浪费，提高回收效率

旧衣回收小程序：减少资源浪费，提高回收效率

当下&#xff0c;旧衣服回收成为了大众热衷的事&#xff0c;不少居民都会把闲置的衣物进行回收&#xff0c;旧衣回收行业逐渐火爆。不过&#xff0c;传统的旧衣回收模式已经不符合当下时代发展&#xff0c;具有较大的不便利性。 因此&#xff0c;为解决这一问题&#xff0c;线…
阅读更多...
PG实践｜内置函数之GENERATE_SERIES之深入理解（二）

PG实践｜内置函数之GENERATE_SERIES之深入理解（二）

&#x1f4eb; 作者简介&#xff1a;「六月暴雪飞梨花」&#xff0c;专注于研究Java&#xff0c;就职于科技型公司后端工程师 &#x1f3c6; 近期荣誉&#xff1a;华为云云享专家、阿里云专家博主、腾讯云优秀创作者、ACDU成员 &#x1f525; 三连支持&#xff1a;欢迎 ❤️关注…
阅读更多...
使用Vue CLI方式创建Vue3.0应用程序

使用Vue CLI方式创建Vue3.0应用程序

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。新版本的 Vue CLI 的包名由原来的 vue-cli 改成了 vue/cli。 在开发大型项目时&#xff0c;需要考虑项目的组织结构、项目构建和部署等问题。如果手动完成这些配置工作&#xff0c;工作效率会非常低。为此&#xff0c;Vue.…
阅读更多...
Rocky Linux 9 快速安装docker 教程

Rocky Linux 9 快速安装docker 教程

前述 CentOS 7系统将于2024年06月30日停止维护服务。CentOS官方不再提供CentOS 及后续版本&#xff0c;不再支持新的软件和补丁更新。CentOS用户现有业务随时面临宕机和安全风险&#xff0c;并无法确保及时恢复。由于 CentOS Stream 相对不稳定&#xff0c;刚好在寻找平替系统…
阅读更多...
Python学生信息管理系统（完整代码）

Python学生信息管理系统（完整代码）

引言&#xff1a;&#xff08;假装不是一个大学生课设&#xff09;在现代教育管理中&#xff0c;学生管理系统显得尤为重要。这种系统能够帮助教育机构有效地管理学生资料、成绩、出勤以及其他教育相关活动&#xff0c;从而提高管理效率并减少人为错误。通过使用Python&#xf…
阅读更多...
IDEA版本推荐

IDEA版本推荐

推荐版本&#xff1a; IDEA 2024.1.4 下载链接&#xff1a;IDEA下载 &#xff08;下载时可以往下拖&#xff0c;选到自己想要的版本哦&#xff09; 本人由于项目开发需要&#xff0c;陆续用过几个版本的IDEA&#xff0c;包括&#xff1a; IDEA 2020.2.4 。这是在看韩顺平老师…
阅读更多...
昇思25天学习打卡营第9天|CycleGAN图像风格迁移互换

昇思25天学习打卡营第9天|CycleGAN图像风格迁移互换

文章目录 昇思MindSpore应用实践基于MindSpore的CycleGAN图像风格迁移互换1、CycleGAN 概述2、生成器部分3、判别器部分4、优化器和损失函数5、模型训练6、模型推理 Reference 昇思MindSpore应用实践 本系列文章主要用于记录昇思25天学习打卡营的学习心得。 基于MindSpore的C…
阅读更多...
打造商贸物流“产-供-销”、“仓-运-配”全流程供应链

打造商贸物流“产-供-销”、“仓-运-配”全流程供应链

在当今全球化的商业环境中&#xff0c;商贸物流平台的搭建成为企业提升效率、降低成本并增强市场竞争力的关键因素。在现代商业环境中&#xff0c;商贸与物流之间的紧密协作是业务成功的关键因素。然而&#xff0c;许多组织面临着信息不对称、资源配套不足、以及系统间隔离等痛…
阅读更多...
Windows的管理工具

Windows的管理工具

任务计划程序&#xff1a;这是一个用来安排任务自动运行的工具。你可以在这里创建新的任务&#xff0c;设定触发条件&#xff0c;并指定任务的操作。 事件查看器&#xff1a;这是一套日志记录和分析工具&#xff0c;&#xff0c;你可以了解到系统的工作状况&#xff0c;帮助诊…
阅读更多...
Spark大数据处理：技术、应用与性能优化(全)PDF书籍推荐分享

Spark大数据处理：技术、应用与性能优化(全)PDF书籍推荐分享

本书从一个系统化的视角&#xff0c;秉承大道至简的主导思想&#xff0c;介绍Spark中最值得关注的内 容&#xff0c;讲解Spark部署、开发实战&#xff0c;并结合Spark的运行机制及拓展&#xff0c;帮读者开启Spark技术之旅。 Spark大数据处理&#xff1a;技术、应用与性能优化…
阅读更多...
阿里云邮件推送邮件发送失败的问题排查解决

阿里云邮件推送邮件发送失败的问题排查解决

阿里云邮件推送为何失败&#xff1f;解决邮件推送失败的步骤指南&#xff01; 即便是功能强大的阿里云邮件推送服务&#xff0c;也可能在实际使用中遇到邮件发送失败的问题。AokSend将详细介绍如何排查和解决阿里云邮件推送邮件发送失败的问题。 阿里云邮件推送&#xff1a;验…
阅读更多...
深入浅出 LangChain 与智能 Agent：构建下一代 AI 助手

深入浅出 LangChain 与智能 Agent：构建下一代 AI 助手

我们小时候都玩过乐高积木。通过堆砌各种颜色和形状的积木&#xff0c;我们可以构建出城堡、飞机、甚至整个城市。现在&#xff0c;想象一下如果有一个数字世界的乐高&#xff0c;我们可以用这样的“积木”来构建智能程序&#xff0c;这些程序能够阅读、理解和撰写文本&#xf…
阅读更多...
6.26.3 基于Transformer的深度神经网络在数字乳腺断层合成图像上的乳腺癌分类

6.26.3 基于Transformer的深度神经网络在数字乳腺断层合成图像上的乳腺癌分类

开发一种有效的深度神经网络模型&#xff0c;该模型结合了相邻图像部分的上下文&#xff0c;以检测数字乳腺断层合成(DBT)图像上的乳腺癌。 数字乳房断层合成(DBT)是一种医学成像技术&#xff0c;其中检测器围绕患者以有限角度旋转并记录多幅图像。然后将这些图像重建为二维(2D…
阅读更多...
盛元广通打造智慧校园实验室安全管理系统

盛元广通打造智慧校园实验室安全管理系统

盛元广通智慧校园实验室安全管理系统以安全为重点&#xff0c;构建由学校、二级单位、实验室组成的三级联动的实验室安全多级管理体系、多类用户角色&#xff0c;内置教育部标准检查表&#xff0c;支撑实验室相关业务过程的智慧管理。实现通过PC端/手机移动端开展检查工作、手机…
阅读更多...
一个opencv实现检测程序

一个opencv实现检测程序

引言 图像处理是计算机视觉中的一个重要领域&#xff0c;它在许多应用中扮演着关键角色&#xff0c;如自动驾驶、医疗图像分析和人脸识别等。边缘检测是图像处理中的基本任务之一&#xff0c;它用于识别图像中的显著边界。本文将通过一个基于 Python 和 OpenCV 的示例程序&…
阅读更多...
Vue86-Vuex中的getters属性

Vue86-Vuex中的getters属性

一、getters的使用 1-1、index.js中getters的书写 计算属性computed靠return获得返回值&#xff01; 1-2、组件中getters的调用 state是数据源&#xff0c;getters是拿着数据源里的东西进行一番加工。像极了&#xff1a;data和computed 二、小结
阅读更多...
Map Set（Java篇详解）

Map Set（Java篇详解）

&#x1f341; 个人主页&#xff1a;爱编程的Tom&#x1f4ab; 本篇博文收录专栏&#xff1a;Java专栏&#x1f449; 目前其它专栏&#xff1a;c系列小游戏 c语言系列--万物的开始_ 等 &#x1f389; 欢迎 &#x1f44d;点赞✍评论⭐收藏&#x1f496;三连支持…
阅读更多...
设备的智能决策AI大模型与ESP32-S3芯片应用，启明云端乐鑫代理商

设备的智能决策AI大模型与ESP32-S3芯片应用，启明云端乐鑫代理商

在数字化浪潮的推动下&#xff0c;智能家居、智能安防、智能设备等领域对AI技术的需求日益增长&#xff0c;人工智能&#xff08;AI&#xff09;正迅速成为推动各行各业创新的核心力量。 AI大模型技术以其强大的数据处理能力和深度学习能力&#xff0c;正在成为智能时代的新动…
阅读更多...
图书电商引入实在Agent：自动化运营提效80%，节省人天1000+

图书电商引入实在Agent：自动化运营提效80%，节省人天1000+

某知名教辅图书品牌深耕中小学教辅图书领域&#xff0c;是中国最具影响力的教育出版策划与发行集团之一&#xff0c;以丰富的图书品类&#xff0c;满足了小学、初中、高中各年龄段读者多元化的阅读需求。 2023年&#xff0c;该品牌在运营、客服等多部门超60个场景中部署实在Ag…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站