文章出處

寫在前面

在web服務端開發中,字符的編解碼幾乎每天都要打交道。編解碼一旦處理不當,就會出現令人頭疼的亂碼問題。

不少從事node服務端開發的同學,由于對字符編碼碼相關知識了解不足,遇到問題時,經常會一籌莫展,花大量的時間在排查、解決問題。

文本先對字符編解碼的基礎知識進行簡單介紹,然后舉例說明如何在node中進行編解碼,最后是服務端的代碼案例。本文相關代碼示例可在這里找到。

關于字符編解碼

在網絡通信的過程中,傳輸的都是二進制的比特位,不管發送的內容是文本還是圖片,采用的語言是中文還是英文。

舉個例子,客戶端向服務端發送"你好"。

客戶端 --- 你好 ---> 服務端

這中間包含了兩個關鍵步驟,分別對應的是編碼、解碼。

  1. 客戶端:將"你好"這個字符串,編碼成計算機網絡需要的二進制比特位。
  2. 服務端:將接收到的二進制比特位,解碼成"你好"這個字符串。

總結一下:

  1. 編碼:將需要傳送的數據,轉成對應的二進制比特位。
  2. 解碼:將二進制比特位,轉成原始的數據。

上面有些重要的技術細節沒有提到,答案在下一小節。

  • 客戶端怎么知道"你好"這個字符對應的比特位是多少?
  • 服務端收到二進制比特位之后,怎么知道對應的字符串是什么?

關于字符集和字符編碼

上面提到字符、二進制的轉換問題。既然兩者可以互相轉換,也就是說存在明確的轉換規則,可以實現字符<->二進制的相互轉換。

這里提到的轉換規則,其實就是我們經常聽到的字符集&字符編碼。

字符集是一系列字符(文字、標點符號等)的集合。字符集有很多,常見的有ASCII、Unicode、GBK等。不同字符集主要的區別在于包含字符個數的不同。

了解了字符集的概念后,接下來介紹下字符編碼。

字符集告訴我們支持哪些字符,但具體字符怎么編碼,是由字符編碼決定的。比如Unicode字符集,支持的字符編碼有UTF8(常用)、UTF16、UTF32。

概括一下:

  • 字符集:字符的集合,不同字符集包含的字符數不同。
  • 字符編碼:字符集中字符的實際編碼方式。
  • 一個字符集可能有多種字符編碼方式。

可以把字符編碼看成一個映射表,客戶端、服務端就是根據這個映射表,來實現字符跟二進制的編解碼轉換。

舉個例子,"你"這個字符,在UTF8編碼中,占據三個字節0xe4 0xbd 0xa0,而在GBK編碼中,占據兩個字節0xc4 0xe3

字符編解碼例子

上面已經提到了字符編解碼所需的基礎知識。下面我們看一個簡單的例子,這里借助了icon-lite這個庫來幫助我們實現編解碼的操作。

可以看到,在字符編碼時,我們采用了gbk。在解碼時,如果同樣采用gbk,可以得到原始的字符。而當我們解碼時采用utf8時,則出現了亂碼。

var iconv = require('iconv-lite');

var oriText = '你';

var encodedBuff = iconv.encode(oriText, 'gbk');
console.log(encodedBuff);
// <Buffer c4 e3>

var decodedText = iconv.decode(encodedBuff, 'gbk');
console.log(decodedText);
// 你

var wrongText = iconv.decode(encodedBuff, 'utf8');
console.log(wrongText);
// ��

實際例子:服務端編解碼

通常我們需要處理編解碼的場景有文件讀寫、網絡請求處理。這里距網絡請求的例子,介紹如何在服務端進行編解碼。

假設我們運行著如下http服務,監聽來自客戶端的請求。客戶端傳輸數據時采用了gbk編碼,而服務端默認采用的是utf8編碼。

如果此時采用默認的utf8對請求進行解碼,就會出現亂碼,因此需要特殊處理。

服務端代碼如下(為簡化代碼,這里跳過了請求方法、請求編碼的判斷)

var http = require('http');
var iconv = require('iconv-lite');

// 假設客戶端采用post方法,編碼為gbk
var server = http.createServer(function (req, res) {
    var chunks = [];
    
    req.on('data', function (chunk) {
        chunks.push(chunk)
    });

    req.on('end', function () {
        chunks = Buffer.concat(chunks);

        // 對二進制進行解碼
        var body = iconv.decode(chunks, 'gbk');
        console.log(body);

        res.end('HELLO FROM SERVER');
    });

});

server.listen(3000);

對應的客戶端代碼如下:

var http = require('http');
var iconv = require('iconv-lite');

var charset = 'gbk';

// 對字符"你"進行編碼
var reqBuff = iconv.encode('你', charset);

var options = {
    hostname: '127.0.0.1',
    port: '3000',
    path: '/',
    method: 'POST',
    headers: {
        'Content-Type': 'text/plain',
        'Content-Encoding': 'identity',
        'Charset': charset // 設置請求字符集編碼
    }
};

var client = http.request(options, function(res) {
    res.pipe(process.stdout);
});

client.end(reqBuff);

相關鏈接

Nodejs學習筆記
https://github.com/chyingp/nodejs-learning-guide

iconv-lite
https://github.com/ashtuchkin/iconv-lite


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()