Home Web Front-end JS Tutorial js implements methods of operating binary data

js implements methods of operating binary data

Jun 01, 2018 pm 04:27 PM
javascript binary operate

Below I will share with you a js method for operating binary data, which has a good reference value. I hope it will be helpful to everyone.

I have recently done several projects, using js to operate binary data and transmit it through socket and background. Let me make a record here with a blog

First, create a new socket:

var socket=new WebSocket("ws://192.168.0.147");
Copy after login

Then define the function to be executed after opening the socket and connecting:

Websocket has an attribute binaryType, which can be set to "blob" or "arraybuffer". The default format is "blob". I forgot to set it to "arraybuffer" when I was working on the project. The result is when receiving data below You need to use a Blob object to access it.

socket.onopen=function(){
 //发送登录帧,4-20位为手机号
 var loginArr=[0X02,0X02,0X00,0X1E,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X20,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X0D,0X0A]        
}
Copy after login

The following is converted to bype and sent out:

var loginBuffer=new ArrayBuffer(30);
var loginDataview=new DataView(loginBuffer);
//localstorageuserinfo为缓存在本地的用户手机号
var telArr=localstorageuserinfo.TelPhone; 
var loginTime=tempTrans();
for(var i=0;i<loginArr.length;){
 loginDataview.setInt8(i,loginArr[i]);
 if(i>3&&i<(telArr.length+4)){
   loginDataview.setInt8(i,telArr.charCodeAt(i-4));
 }   
 if(i>19&&i<loginArr.length-2){
  loginDataview.setInt8(i,loginTime[i-20]);
 }
 i++;
}
//登录包
socket.send(loginDataview.buffer);   
//格式化时间同时按照年俩位月日时分秒1位由高到底排序
function tempTrans(time){
 if(!time){
  time=new Date();
 }
 var u32Dataview=new DataView(new Uint16Array([time.getFullYear()]).buffer);
 var uint8=[];
 uint8.push(new DataView(new Uint8Array([0X00]).buffer).getUint8(0))
 for(var i=u32Dataview.byteLength-1;i>=0;i--){
  uint8.push(u32Dataview.getUint8(i))
 }
 uint8.push(new DataView(new Uint8Array([time.getMonth()+1]).buffer).getUint8(0));
 uint8.push(new DataView(new Uint8Array([time.getDate()]).buffer).getUint8(0));
 uint8.push(new DataView(new Uint8Array([time.getHours()]).buffer).getUint8(0));
 uint8.push(new DataView(new Uint8Array([time.getMinutes()]).buffer).getUint8(0));
 uint8.push(new DataView(new Uint8Array([time.getSeconds()]).buffer).getUint8(0));
 return uint8;
}
Copy after login

The sending process is roughly like this. First, create a new ArrayBuffer object, which needs to fill in the buffer length parameter. See the api for details==> https://msdn.microsoft.com/zh-cn/library/br212474(v=vs.94).aspx,

Then create a new DataView object and pass the ArrayBuffer in. Then use DataView's setUint and getUint methods to read and set bits. For details, refer to api==> https://msdn.microsoft.com/zh-cn/library/br212463(v=vs.94).aspx

The following is the processing of receiving data:

//接收消息onmessage
socket.onmessage=function(data){
  var blob_=new Blob([data.data]);
  parseBlob(blob_);
 }
//使用fileReader操作blob对象
var reader = { 
 readAs: function(type,blob,cb){
  var r = new FileReader();
  r.onloadend = function(){
    if(typeof(cb) === &#39;function&#39;) {
    cb.call(r,r.result);
    }
  }
  try{
    r[&#39;readAs&#39;+type](blob);
  }catch(e){}
  }
}
function parseBlob(blob){
 reader.readAs(&#39;ArrayBuffer&#39;,blob.slice(0,blob.size),function(arr){
   var dataview_=new DataView(arr);
   //协议中第二位是判断数据来源的
   var socketConType=dataview_.getUint8(1);
   //转成字符串读取数据
   var modulelength=(dataview_.buffer.byteLength-46)/33;
   var modulestate={};
    reader.readAs(&#39;Text&#39;,blob.slice(i*33+37,i*33+37+32),function(result){
    modulestate[dataview_.getUint8(i*33+36)]=result;
   });
 })
}
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of the loader mechanism of webpack source code

A brief introduction to the use of react redux middleware

js css to achieve typing effect

The above is the detailed content of js implements methods of operating binary data. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PyCharm usage tutorial: guide you in detail to run the operation PyCharm usage tutorial: guide you in detail to run the operation Feb 26, 2024 pm 05:51 PM

PyCharm is a very popular Python integrated development environment (IDE). It provides a wealth of functions and tools to make Python development more efficient and convenient. This article will introduce you to the basic operation methods of PyCharm and provide specific code examples to help readers quickly get started and become proficient in operating the tool. 1. Download and install PyCharm First, we need to go to the PyCharm official website (https://www.jetbrains.com/pyc

What is sudo and why is it important? What is sudo and why is it important? Feb 21, 2024 pm 07:01 PM

sudo (superuser execution) is a key command in Linux and Unix systems that allows ordinary users to run specific commands with root privileges. The function of sudo is mainly reflected in the following aspects: Providing permission control: sudo achieves strict control over system resources and sensitive operations by authorizing users to temporarily obtain superuser permissions. Ordinary users can only obtain temporary privileges through sudo when needed, and do not need to log in as superuser all the time. Improved security: By using sudo, you can avoid using the root account during routine operations. Using the root account for all operations may lead to unexpected system damage, as any mistaken or careless operation will have full permissions. and

Linux Deploy operation steps and precautions Linux Deploy operation steps and precautions Mar 14, 2024 pm 03:03 PM

LinuxDeploy operating steps and precautions LinuxDeploy is a powerful tool that can help users quickly deploy various Linux distributions on Android devices, allowing users to experience a complete Linux system on their mobile devices. This article will introduce the operating steps and precautions of LinuxDeploy in detail, and provide specific code examples to help readers better use this tool. Operation steps: Install LinuxDeploy: First, install

What to do if you forget to press F2 for win10 boot password What to do if you forget to press F2 for win10 boot password Feb 28, 2024 am 08:31 AM

Presumably many users have several unused computers at home, and they have completely forgotten the power-on password because they have not been used for a long time, so they would like to know what to do if they forget the password? Then let’s take a look together. What to do if you forget to press F2 for win10 boot password? 1. Press the power button of the computer, and then press F2 when turning on the computer (different computer brands have different buttons to enter the BIOS). 2. In the bios interface, find the security option (the location may be different for different brands of computers). Usually in the settings menu at the top. 3. Then find the SupervisorPassword option and click it. 4. At this time, the user can see his password, and at the same time find the Enabled next to it and switch it to Dis.

Huawei Mate60 Pro screenshot operation steps sharing Huawei Mate60 Pro screenshot operation steps sharing Mar 23, 2024 am 11:15 AM

With the popularity of smartphones, the screenshot function has become one of the essential skills for daily use of mobile phones. As one of Huawei's flagship mobile phones, Huawei Mate60Pro's screenshot function has naturally attracted much attention from users. Today, we will share the screenshot operation steps of Huawei Mate60Pro mobile phone, so that everyone can take screenshots more conveniently. First of all, Huawei Mate60Pro mobile phone provides a variety of screenshot methods, and you can choose the method that suits you according to your personal habits. The following is a detailed introduction to several commonly used interceptions:

How to calculate binary arithmetic How to calculate binary arithmetic Jan 19, 2024 pm 04:38 PM

Binary arithmetic is an operation method based on binary numbers. Its basic operations include addition, subtraction, multiplication and division. In addition to basic operations, binary arithmetic also includes logical operations, displacement operations and other operations. Logical operations include AND, OR, NOT and other operations, and displacement operations include left shift and right shift operations. These operations have corresponding rules and operand requirements.

PHP PDO Tutorial: An Advanced Guide from Basics to Mastery PHP PDO Tutorial: An Advanced Guide from Basics to Mastery Feb 19, 2024 pm 06:30 PM

1. Introduction to PDO PDO is an extension library of PHP, which provides an object-oriented way to operate the database. PDO supports a variety of databases, including Mysql, postgresql, oracle, SQLServer, etc. PDO enables developers to use a unified API to operate different databases, which allows developers to easily switch between different databases. 2. PDO connects to the database. To use PDO to connect to the database, you first need to create a PDO object. The constructor of the PDO object receives three parameters: database type, host name, database username and password. For example, the following code creates an object that connects to a mysql database: $dsn="mysq

How to read binary files in Golang? How to read binary files in Golang? Mar 21, 2024 am 08:27 AM

How to read binary files in Golang? Binary files are files stored in binary form that contain data that a computer can recognize and process. In Golang, we can use some methods to read binary files and parse them into the data format we want. The following will introduce how to read binary files in Golang and give specific code examples. First, we need to open a binary file using the Open function from the os package, which will return a file object. Then we can make

See all articles