Hiện nay ứng dụng web đã phát triển khác xa so với ngày đầu nó xuất hiện, kèm theo đó là vô số các kỹ thuật mới được áp dụng để phục vụ cho quá trình này nhằm đem lại trải nghiệm mới mẻ, đầy hứng thú và cũng không kém phần tiện dụng cho người dùng. Công nghệ web thời gian thực(realtime) ngày càng trở nên phổ biết. Có nhiều công nghệ, phương pháp giúp xây dựng ứng dụng thời gian thực
AJAX LONG-POLLING:SERVER SENT EVENTS (SSE)COMETWEBSOCKET
Trong đó WEBSOCKET với sự hỗ trợ của HTML 5 đang trở lên chiếm ưu thế tuyệt đối.Bạn đang xem: Socket io là gì
Giao thức Websocket
WebSocket là một giao thức giúp truyền dữ liệu hai chiều giữa server-client qua một kết nối TCP duy nhất. Hơn nữa, webSocket là một giao thức được thiết kế để truyền dữ liệu bằng cách sử dụng cổng 80 và cổng 443 và nó là một phần của HTML5. Vì vậy, webSockets có thể hoạt động trên các cổng web tiêu chuẩn, nên không có rắc rối về việc mở cổng cho các ứng dụng, lo lắng về việc bị chặn bởi các tường lửa hay proxy server
Không giống với giao thức HTTP là cần client chủ động gửi yêu cầu cho server, client sẽ chời đợi để nhận được dữ liệu từ máy chủ. Hay nói cách khác với giao thức Websocket thì server có thể chủ động gửi thông tin đến client mà không cần phải có yêu cầu từ client.
Đang xem: Socket.io là gì, hướng dẫn sử dụng socket io cơ bản
Tất cả dữ liệu giao tiếp giữa client-server sẽ được gửi trực tiếp qua một kết nối cố định làm cho thông tin được gửi đi nhanh chóng và liên tục khi cần thiết. WebSocket làm giảm độ trễ bởi vì một khi kết nối WebSocket được thành lập, server không cần phải chờ đợi cho một yêu cầu từ client.
Để có thể sử dụng được Websocket thì không phải chỉ cần trình duyệt hỗ trợ mà còn phải có server Websocket, server Websocket có thể được tạo ra bằng bất kỳ ngôn ngữ server-side nào, nhưng Node.js được sử dụng rộng rãi hơn cả vì nó viết bằng Javascript nên mang nhiều ưu điểm so với các ngôn ngữ server-side truyền thống khác.
Xem thêm: Key Volume License Là Gì – Thế Nào La Volume License Và Retail
Hoạt động
Giao thức có hai phần: Bắt tay và truyền dữ liệuBan đầu client sẽ gửi yêu cầu khởi tạo kết nối websocket đến server, server kiểm tra và gửi trả kết quả chấp nhận kết nối, sau đó kết nối được tạo và quá trình gửi dữ liệu có thể được thực hiện, dữ liệu chính là các Ws frame
Bắt tay
Đầu tiên client sẽ gửi một http request yêu cầu nâng cấp
GET /mychat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==Sec-WebSocket-Protocol: chatSec-WebSocket-Version: 13Origin: http://example.comserver trả về
HTTP/1.1 101 Switching Protocols Upgrade: websocketConnection: UpgradeSec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=Sec-WebSocket-Protocol: chatĐể xác nhận việc kết nối, client sẽ gửi một giá trị Sec-WebSocket-Key được mã hóa bằng Based64 đến server.
Xem thêm: Âm Côn Là Gì ? Cách Chơi Xe Cực Kỳ Thu Hút Giới Trẻ Hiện Nay
Sau đó bên server sẽ thực hiện:
Client sẽ kiểm tra status code (phải bằng 101) và Sec-WebSocket-Accept xem có đúng với kết quả mong đợi không và thực hiện kết nối.
Trên thực tế các trường dữ liệu trao đổi có thể khác nhau. Dưới đây là hình ảnh khi client dùng thư viện socket.io mởi kết nối đến server socket
Truyền dữ liệu
Dữ lệu sẽ được truyền thông qua một kết nối duy nhất được tạo ra sau quá trình bắt tay. Dữ liệu được truyền bằng các Frame, ta có thể thấy nó khi bật trình debug của trình duyệt lên
Thư viện Socket.io
Socket.IO là một bộ thư viện dành cho các ứng dụng web, mobile đê phát triển các ứng dụng realtime. Với đặc trưng mạnh mẽ và dễ sử dụng, Socket.IO đang ngày càng được sử dụng rộng rãi từ những trang mạng xã hội cần sự tương tác cao, đến các blog hay các trang web thương mại điện tử.Với bộ thư viện này, làm việc với WebSockets trở nên đơn giản hơn rất nhiều.Thư viện gồm 2 phần
Phía client: gồm bộ thư viện viết cho web(JavaScript), iOS, AndroidPhía server: viết bằng JavaScript và dùng cho các máy chủ node.JS
Socket.IO hỗ trợ sử dụng rất nhiều các công nghệ realtime
WebSocketFlash SocketAJAX long-pollingAJAX multipart streamingIFrameJSONP polling
Nó sẽ tự động chuyển sang Websocket nếu có thể, hầu hết các trình duyệt hiện nay đã hỗ trợ websocket nên việc sử dụng socket.io trên trình duyệt cũng là đang sử dụng websocketViệc sử dụng socket.io rất đơn giản và giống nhau ở cả client lẫn servernó bao gồm 3 phần chính:
Khởi tạo kết nốiLắng nghe eventGửi event
Riêng ở server thì sẽ không có phần khởi tạo kết nối vì chỉ có clent mới cần khởi tạo kết nối đến serverViệc dùng socket.io đồng bộ ở cả client lẫn server, cú pháp cũng khá đơn giản.Chúng ta sẽ làm một ví dụ nhỏ để làm quen với một số cách gửi và nhận dữ liệu với socket.io
Server API
Ta sẽ khởi tạo một server socket bằng thư viện socket.ioĐầu tiên cần tạo ứng dụng nodejstạo file package.json với nội dung sau
{ “name”: “Websocket”, “version”: “1.0.0”, “description”: “begin”, “main”: “index.js”, “scripts”: { “test”: “echo “Error: no test specified” && exit 1″ }, “author”: “thangnt”, “license”: “ISC”, “dependencies”: { “express”: “^4.15.4”, “request”: “^2.81.0”, “socket.io”: “^2.0.4” }}file index.js
var express = require(“express”);var app = express();var server = require(“http”).Server(app);var io = require(“socket.io”)(server);var port = (process.env.OPENSHIFT_NODEJS_PORT || process.env.PORT || 6969);server.listen(port, () => console.log(“Server running in port ” + port));io.on(“connection”, function (socket) { //Bắt sự kiện một client kết nối đến server socket.on(“all client”, function (data) { //lắng nghe event “all client” io.sockets.emit(“news”, socket.id + ” send all client: ” + data); // gửi cho tất cả client }); socket.on(“broadcast”, function (data) { //lắng nghe event “broadcast” socket.broadcast.emit(“news”, socket.id + ” send broadcast: ” + data); // gửi event cho tất cả các client từ client hiện tại }); socket.on(“private”, function (data) { //lắng nghe event “private” socket.emit(“news”, ” You send private message: ” + data); // chỉ gửi event cho client hiện tại });});app.get(“/”, (req, res) => { res.sendFile(“test-socket-client.html”, { “root”: __dirname });})
Client API
Để sử dụng được socket.io ở phía trình duyệt, ta cần import thư viện socket.iotạo file test-socket-client.html