0Pricing
WebSockets & Realtime Systems Programming · บทเรียน

การจัดกรอบข้อมูลและข้อความของ WebSocket

ทำความเข้าใจวิธีบรรจุข้อมูลลงในเฟรม ซึ่งรวมถึงข้อความตัวอักษรและไบนารี รวมถึงบทบาทของรหัสการทำงาน

การจัดกรอบข้อมูลและข้อความของ WebSocket เป็นบทเรียน WebSockets & Realtime Systems Programming ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน WebSockets & Realtime Systems Programming และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส WebSockets & Realtime Systems Programming มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Data: More Than Just Bytes

When you send data over a network, it's not just a raw stream of bits. It needs structure! Think of it like sending a letter:

  • You need an envelope (the frame).
  • You need a stamp (protocol headers).
  • You need the actual message inside.

WebSockets use a similar concept called data framing.

What is a WebSocket Frame?

A WebSocket frame is the basic unit of data transfer over a WebSocket connection. Instead of sending one big message, WebSockets break data into smaller, manageable frames.

This allows for:

  • Sending parts of a message over time.
  • Mixing different types of data.
  • Controlling the connection itself.

Anatomy of a Frame: The Header

Every WebSocket frame starts with a header containing crucial information. Let's look at the first byte:

  • FIN bit (1 bit): Is this the final frame of a message?
  • RSV bits (3 bits): Reserved bits, usually 0.
  • Opcode (4 bits): What kind of data is in this frame?

These bits tell the receiver how to interpret the frame.

The Opcode: Frame's Purpose

The Opcode is a 4-bit field that tells the receiving endpoint what type of data is contained in the frame's payload. It's like a label for the content.

Common opcodes include:

  • 0x1: Text Frame
  • 0x2: Binary Frame
  • 0x8: Connection Close
  • 0x9: Ping
  • 0xA: Pong

Text Messages (Opcode 0x1)

When you send a regular string, like a chat message, it's typically sent as a Text Frame (Opcode 0x1). The payload of this frame contains UTF-8 encoded text data.

A single text message can be split across multiple frames. Only the last frame of a message will have the FIN bit set to 1.

Binary Messages (Opcode 0x2)

For non-textual data, like images, audio, or custom data structures, WebSockets use Binary Frames (Opcode 0x2).

The payload in these frames is raw binary data. This makes WebSockets very flexible for different application needs, from gaming to streaming.

Control Frames: Close, Ping, Pong

Besides data, WebSockets also have Control Frames to manage the connection:

  • Close (0x8): Initiates or responds to a connection close.
  • Ping (0x9): Sent to check if the remote endpoint is alive.
  • Pong (0xA): Response to a Ping, confirming liveness.

Control frames must have their FIN bit set and cannot be fragmented.

Payload Length & Masking

After the first byte, the frame header includes the Payload Length, which indicates how long the actual data is. It can be 7, 16, or 63 bits long, depending on the message size.

For client-to-server messages, there's also a Masking Key (4 bytes). This key XORs with the payload to hide data from intermediaries. The server must unmask the data.

Simulating a Text Frame

This simple Java program conceptually shows how you might interpret the first two bytes of a WebSocket frame. It simulates a frame for the text "Hello".

In reality, the payload would be unmasked and decoded.

public class FrameDecoder {
  public static void main(String[] args) {
    // Simulate first 2 bytes of a frame:
    // 0x81: FIN=1, RSV=0, Opcode=0x1 (Text)
    // 0x85: Mask=1, Payload Length=5
    byte[] frameHeader = {(byte) 0x81, (byte) 0x85};

    boolean isFin = (frameHeader[0] & 0x80) != 0;
    int opcode = frameHeader[0] & 0x0F;
    boolean isMasked = (frameHeader[1] & 0x80) != 0;
    int payloadLen = frameHeader[1] & 0x7F;

    System.out.println("FIN: " + isFin);
    System.out.println("Opcode: " + opcode + " (Text)");
    System.out.println("Masked: " + isMasked);
    System.out.println("Payload Length: " + payloadLen);
  }
}

Check Your Knowledge

Which of the following opcodes is used to indicate a binary data frame in WebSockets?

Recap: Framing for Realtime

We've explored how WebSockets package data into frames. Each frame has a header with a FIN bit, RSV bits, and a crucial Opcode.

Opcodes define the frame's purpose, whether it's for text (0x1), binary (0x2), or control (0x8, 0x9, 0xA). This framing mechanism allows for robust and flexible bidirectional communication.

คำถามที่พบบ่อย

บทเรียน “การจัดกรอบข้อมูลและข้อความของ WebSocket” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจัดกรอบข้อมูลและข้อความของ WebSocket” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส WebSockets & Realtime Systems Programming ให้อัปเกรดเป็น CoddyKit PRO คอร์ส WebSockets & Realtime Systems Programming มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจัดกรอบข้อมูลและข้อความของ WebSocket”

ทำความเข้าใจวิธีบรรจุข้อมูลลงในเฟรม ซึ่งรวมถึงข้อความตัวอักษรและไบนารี รวมถึงบทบาทของรหัสการทำงาน คุณปฏิบัติ WebSockets & Realtime Systems Programming ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน WebSockets & Realtime Systems Programming หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน WebSockets & Realtime Systems Programming บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การจัดกรอบข้อมูลและข้อความของ WebSocket” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน WebSockets & Realtime Systems Programming นี้ได้ไหม

ได้ บทเรียน WebSockets & Realtime Systems Programming ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. อธิบายการจับมือของ WebSocket
  2. การจัดกรอบข้อมูลและข้อความของ WebSocket
  3. วงจรชีวิตและสถานะการเชื่อมต่อ
  4. โพรโทคอลย่อย ส่วนขยาย และการบีบอัด
← กลับไปที่ WebSockets & Realtime Systems Programming