Video học lập trình mỗi ngày

Chúng ta đã nghe nhiều về WebSocket, thậm chí nghe thêm về Socket.io. Nhưng có mấy ai đủ hiểu về cách thức hoạt động WebSocket và vì sao WebSocket ra đời. Nó đóng vai trò gì đây? Trong bài viết này sẽ cố gắng giải thích những điều trên cho các bạn nghe và hiểu thêm.

Đọc thêm: Thực hành Websocket API.

WebSocket vì sao xuất hiện

Hiểu là phải hiểu toàn diện. Vì sao có WebSocket thì hồi xưa ông cha ta muốn làm một ứng dụng nhắn tin theo kiểu realtime thì không có công nghệ nào như bây giờ. Đành phải tự nghĩ ra nhiều chiêu thức, và cuối cùng mấy ông tổ chức cuộc thi tìm ý tưởng cho realtime. 

Cuối cùng sao bao phen họp, cãi nhau thì mấy ông thống nhất đưa ra cách đó là sử dụng cơ chế Polling. Đến đây thì có nhiều bạn bỡ ngỡ hỏi ủa nó là gì? Thì giải thích luôn.

Polling là gì?

Như bài viết trên thì Polling là một kỹ thuật hay trong kiếm hiệp người ta gọi là tuyệt kỹ. Nó sử dụng để luôn luôn "Hỏi và kéo data từ máy chủ về". 

Có nghĩa là, hai thằng chat với nhau gọi là A và B. Thì A chat cho B. Làm sao B biết được ngoài việc reload lại page khi thời đó chưa có công nghệ realtime như WebSocket, socket.io hay firebase... như bây giờ. 

Vậy là B sử dụng Polling để hỏi máy chủ rằng, tao có gì mới không, nếu có cho tao xem với. 

Code sẽ là như thế này:

var polling = function(url, type, data){
    var xhr = new XMLHttpRequest(), 
        type = type || "GET",
        data = data || null;

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4) {
            receive(xhr.responseText);
            xhr.onreadystatechange = null;
        }
    };

    xhr.open(type, url, true);
    xhr.send(type == "GET" ? null : data);
};

var timer = setInterval(function(){
    polling();
}, 1000);

Ở đoạn code trên, nhìn vào cũng thấy cứ mỗi giây thì client sẽ gọi xuống server để lấy data, nếu có thì hiện không thì thôi. Nhưng sau một lúc thử nghiệm, mấy ông tổ lại phát hiện ra tuyệt kỹ Polling này có nhược điểm lớn và ai cũng thấy đó là việc vì lý do mạng hay gì đó mà không response được thì sao đây, chứ chưa nói đến spam server. 

Gọi liên tục vậy mà đoạ. Không bó tay trước hoàn cảnh, các cụ tổ quyết định sửa lại và nâng cấp lên kỹ thuật có tên là "long-polling". Tiếp tục tìm hiểu cơ chế này.

long-polling là gì?

Thật ra cũng chả có gì đặc biệt về cơ chế này, chẳng qua đổi tên cho nó oai vậy thôi, chứ chẳng khá hơn là mấy. Xem đoạn code sau để tiếp tục phân tích mấy cụ code thế nào?

var longPoll = function(type, url){
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){
        //  thành công, kết nối lại
        if(xhr.readyState == 4) {
            receive(xhr.responseText);
            xhr.onreadystatechange = null;

            longPoll(type, url);
        }
    };

    xhr.open(type, url, true);
    xhr.send();
}

Khi đối tượng xhr đóng kết nối thì ngay lập tức kết nối lại chính nó. Cách này có vẻ hay hơn trước, nó chỉ hư hại khi mất connect ở máy chủ mà thôi. Chứ giả sử lỗi return về thì khỏi cần gọi. 

Cũng là một ý tưởng tốt, nhưng việc spam server cũng chả cải thiện gì. Vậy mấy ông cụ tổ của chúng ta lại nghĩ ra phương pháp khác. Đó là sử dụng iframe nhưng các bạn tự tìm hiểu về có chế này, ở đây tôi không nói đến nữa. Cũng vì những nhược điểm trên thì có lẽ WebSocket ra đời cũng là một quy luật tất yếu như let, const thay thế var trong js...

Sự xuất hiện của WebSocket

Chính vì những hạn chế của các giải pháp trên mà HTML5 WebSocket ra đời. Trình duyệt có thể sử dụng JavaScript để sử dụng giao thức HTTP hiện có để gửi yêu cầu kết nối WebSocket tới máy chủ. 

Khi kết nối được thiết lập, Máy khách và máy chủ có thể trực tiếp trao đổi dữ liệu trực tiếp thông qua kết nối TCP. Điều này là do giao thức websocket về bản chất là kết nối TCP, do đó tính ổn định và khối lượng truyền tải dữ liệu được đảm bảo, và so với các công nghệ thăm dò (Polling) và Comet trước đây, hiệu suất cũng đã được cải thiện đáng kể: 

Một điều cần lưu ý là mặc dù websocket cần sử dụng HTTP để giao tiếp, nhưng về cơ bản nó khác với HTTP: WebSocket là một giao thức truyền thông hai chiều, sau khi kết nối được thiết lập, cả máy chủ và máy khách WebSocket đều có thể chủ động gửi hoặc nhận dữ liệu cho nhau. WebSocket cần được kết nối trước và chỉ sau đó mới có thể giao tiếp với nhau. Nhìn vào có thể như giao thoa của HTTP và WebSocket. Nhưng sự khác biệt cũng rất lớn.

WebSocket là gì?

WebSocket là một giao thức giao tiếp full-duplex (song công hay gọi là hai hướng) trên một kết nối TCP duy nhất. Sự xuất hiện của nó giúp việc trao đổi dữ liệu giữa máy khách và máy chủ dễ dàng hơn. 

WebSocket thường được sử dụng trong các tình huống có yêu cầu thời gian thực cao, chẳng hạn như dữ liệu sự kiện, cổ phiếu và chứng khoán, trò chuyện trên web và đồ họa trực tuyến. Mở rộng thêm WebSocket là một giao thức cho phép giao tiếp hai hướng trên một kết nối TCP duy nhất. Giao thức truyền thông WebSocket được IETF định nghĩa là RFC6455 tiêu chuẩn vào năm 2011 và được bổ sung bởi RFC7936. Nhìn thấy điều này, nhiều độc giả sẽ có câu hỏi: RFC là gì? 

Sự khác biệt giữa WebSocket và Ajax

Vâng đây sẽ là một câu hỏi rất nhiều bạn thắc mắc và cộng đồng cũng đánh giá cao về câu hỏi này. Nếu giải thích ngắn gọn thì tôi sẽ cho bạn một cái đánh giá nhanh nhất. 

Ajax chính là sự kết hợp giữa JavaScript và XML không đồng bộ, không phải là ngôn ngữ lập trình mà đó là một công nghệ web được tạo ra cho phép các web tương tác với nhau. Và nếu kỹ hơn các bạn có thể tham khảo các bài viết khác... 

Websocket là một giao thức mới của HTML5, giúp thực hiện giao tiếp theo thời gian thực giữa Browser và Server. 

Trên kia là định nghĩa vậy giữa AJAX và Websocket chúng khác nhau gì? Có hai điều khác nhau rõ rệt nhất đó là: 

Vòng đời khác nhau, có nghĩa là gì, tôi sẽ nói luôn: 

websocket là một kết nối lâu dài, phiên luôn được duy trì 

Ajax sẽ bị ngắt kết nối sau khi gửi và nhận, ok chưa? 

Phạm vi áp dụng:

websocket được sử dụng cho dữ liệu tương tác thời gian thực giữa giao diện người dùng và tầng dưới. Có ví dụ cụ thể đừng lo quá nếu còn không hiểu. 

ajax không theo thời gian thực

RFC là gì? 

RFC là một loạt các tài liệu được đánh số dạng như lịch sử vậy, bao gồm một loạt các bản nháp và các bản tiêu chuẩn chính thức. Hầu hết tất cả các giao thức truyền thông Internet đều được ghi lại trong RFC, chẳng hạn như tiêu chuẩn giao thức HTTP, tiêu chuẩn giao thức WebSocket được giới thiệu trong bài viết này và tiêu chuẩn mã hóa Base64. Ngoài ra, RFC cũng bổ sung nhiều chủ đề. Trong bài viết này chúng ta chỉ nói về WebSocekt sẽ dựa trên RFC6455. 

Đù nhiều kiến thức phải giải thích vậy ta ơi... Đụng đến đâu phải giải thích vậy cũng mệt. Bởi cho nên mỗi code thôi chưa đủ. Tiếp theo thì chúng ta tìm hiểu và cách sử dụng Websocket.