Socket IO là gì? Hướng dẫn sử dụng socket io cơ bản

1728
30-03-2021
Socket IO là gì? Hướng dẫn sử dụng socket io cơ bản

Socket IO là 1 thuật ngữ không còn quá xa lạ đối với các lập trình viên chuyên nghiệp. Nó được xem là 1 công cụ để thực hiện việc kết nối ngay lập tức giữa Client và Server cho các ứng dụng Realtime. Bizfly Cloud sẽ hướng dẫn bạn sử dụng socket io cơ bản qua bài viết này nhé!

Socket IO là gì?

Khi truy cập vào 1 trang web hoặc ứng dụng bất kỳ thì việc giao tiếp giữa máy chủ (Server) và máy khách (Client) là việc rất quan trọng. Để máy chủ và máy khách có thể nhận biết được sự thay đổi của đối phương thì cần sử dụng những cách thức như AJAX, long-polling, short-polling, & HTML5 server-sent events,..Việc sử dụng cách giao tiếp bằng những công cụ kể trên tồn tại nhiều nhược điểm trong đó có thể kể đến là kết quả trả về chậm và tốn rất nhiều tài nguyên.

Để khắc phục những nhược điểm này, công cụ socket.io ra đời để giúp cho việc giao tiếp giữa Server và Client diễn ra tức khắc và chiếm ít tài nguyên nhất.

Socket io là gì? Nó được xem là 1 module trong Node.js được nhà sáng chế tạo ra và phát triển từ năm 2010. Mục đích lớn nhất của Socket io là để tạo môi trường giao tiếp thuận lợi trên Internet giúp trả về các giá trị thực ngay tại thời điểm giao tiếp giữa các bên với nhau (thường là giữa server và client).

Việc giao tiếp 2 chiều giữa máy khách và máy chủ được thực hiện bởi socket io khi và chỉ khi máy khách có module này trong trình duyệt và máy chủ cũng đã tích hợp sẵn gói socket io. Các ứng dụng sử dụng socket io thường đòi hỏi tốc độ phản hồi ngay lập tức. Một số ví dụ điển hình như xổ số, trực tiếp bóng đá, chat…

Cần phải nói thêm rằng socket io không phải là 1 ngôn ngữ, vì vậy nó phải được sử dụng kết hợp với những ngôn ngữ khác như php, asp.net, nodejs,.. Đến đây nếu bạn còn thắc mắc socket io là gì, hãy cùng tìm hiểu tiếp về đặc điểm của nó ở phần tiếp theo.

Socket io có những ưu điểm gì?

Socket io mang trong mình nhiều tính năng nổi bật như: bảo mật, binary, tự động kết nối, ghép kênh, phát hiện ngắt kết nối…Chính vì thế việc lựa chọn nó luôn là ưu tiên số 1 của các lập trình viên chuyên nghiệp. Vậy thì những đặc điểm nổi bật của socket io là gì? Hãy cùng nhau phân tích tiếp.

Bảo mật cao

Socket io được xây dựng dựa trên Engine.IO. Nó sẽ khởi chạy phương thức long-polling trước nhất để kết nối. Sau đó nó mới sử dụng các phương thức giao tiếp tốt hơn như là Websocket chẳng hạn. Vì được thiết lập chặt chẽ như vậy nên khi socket io xuất hiện nó sẽ tự động tạo những kết nối bảo mật như là: proxy và cân bằng tải hoặc là tường lửa cá nhân và phần mềm chống vi rút.

Kết nối tự động tới server

Đặc điểm tự động kết nối đến server của socket io là gì? Giả sử trong quá trình khởi chạy bị mất kết nối giữa client và server thì socket io sẽ tự động gắn kết nối mãi mãi cho đến khi nào server phản hồi lại. Và đây là tính năng có thể tùy chỉnh được nên bạn có quyền chọn không kết nối tự động đến bất kỳ server nào mà mình muốn.

Mã hóa nhị phân

Socket io có thể hỗ trợ mã hóa nhị phân như ArrayBuffer và Blob trên trình duyệt hoặc là ArrayBuffer và Buffer trong Node.js.

Cho phép tạo kênh và phòng

Đặc điểm cho phép tạo kênh và phòng của Socket.io là gì? Có thể nói đây là 1 tính năng khá nổi bật khi mà socket io có thể tạo ra mối quan hệ giữa các phần hoặc các module riêng lẻ bằng cách tạo ra những kênh riêng biệt khác nhau. Ngoài việc tạo kênh, nó còn hỗ trợ tạo phòng cho các clients tham gia với mục đích gửi thông báo đến 1 nhóm người dùng được kết nối với 1 số thiết bị nào đó chẳng hạn. Trong đó có thể kể đến 1 số các API đơn giản như hình dưới đây.

Socket IO là gì? Hướng dẫn sử dụng socket io cơ bản - Ảnh 1.

Sử dụng Socket io như thế nào?

Bất cứ ứng dụng realtime nào sử dụng socket io đều có 2 phần: 1 là phía server và 2 là phía client. Cách sử dụng 2 phần này của socket io là gì?

Phần 1 – Server: 

1 server bất kỳ có thể sử dụng nhiều loại ngôn ngữ lập trình khác nhau như: php, asp.net, nodejs,...Để cài đặt socket io thì phải phụ thuộc vào ngôn ngữ lập trình đó. Có thể cài trực tiếp socket io vào cùng 1 server nếu server đó sử dụng ngôn ngữ lập trình là nodejs. Còn đối với các ngôn ngữ lập trình khác thì tùy thuộc vào từng loại khác nhau cũng sẽ có cách cài đặt khác nhau. Ví dụ nếu sử dụng php thì phải cài thêm những package khác hoặc phải sử dụng server riêng mới có thể chạy được socket io.

Phần 2 – Client: 

Có thể sử dụng js hoặc jquery hoặc bất kỳ 1 ngôn ngữ nào khác để xây dựng giao diện người dùng với socket io.

Để hiểu thêm socket io là gì và cần phải chuẩn bị gì, cài đặt thế nào. Hãy theo dõi thứ tự các bước cần thiết sau đây.

Bước 1: Thiết bị để sử dụng socket io bao gồm 1 máy tính (Mac hay Win đều được). 

Bước 2: Tải thư viện socket io về máy tính.

Bước 3: Cài đặt socket io trên server nodejs.

##To run app:

npm install

node server.js

##To view app:

go to: http://localhost:3000/index.html

Đầu tiên hãy tạo thư mục demo (hoặc tên bất kỳ). Sau đó mở màn hình terminal với Mac PC hoặc cmd với Win PC cd đến thư mục demo. Gõ câu lệnh npm init vào màn hình cmd. Hệ thống sẽ bắt đầu chạy và yêu cầu nhập tên dự án. Hãy đặt tên dự án bất kỳ. Bỏ qua các yêu cầu thiết lập khác. Khi nào hệ thống hỏi Yes or No thì gõ Yes để cài đặt.

Hệ thống sẽ tạo ra file package.json là file dùng để cài đặt cấu hình server sau khi kết thúc quá trình cài đặt ở trên. 

package.json: 

------------------------

{

"name": "socket-io-la-gi",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC",

"dependencies": {

"ejs": "^3.1.5",

"express": "^4.17.1",

"socket.io": "^3.1.0"

}

}

Để có thể làm web hoặc ứng dụng realtime thì bạn hãy đặt những package cần thiết lên server. Để cài đặt chúng lên server, đầu tiên mở màn hình cmd > cd đến thư mục demo đã tạo ngay lúc đầu tiên. Sau đó nhập dòng lệnh npm install expressjs socketio và khởi chạy. Cuối cùng hệ thống sẽ tạo ra thư mục node_modules khi cài đặt thành công.

Cách hoạt động của Socket io

Cơ chế hoạt động của socket io là gì? Việc đầu tiên là cần phải khai báo hoạt động của socket io trên cả server lẫn client. 

Dưới đây là code khai báo của socket io trên server

// build server, khai báo sử dụng socket io

var express = require("express");

var app = express();

app.use(express.static("public"));

var server = require("http").Server(app);

var io = require("socket.io")(server);

// STEP 2

io.on("connection", function(socket) {

    socket.on("disconnect", function() {});

    //server lắng nghe dữ liệu từ client

    socket.on("Client-sent-data", function(data) {

        //sau khi lắng nghe dữ liệu, server phát lại dữ liệu này đến các client khác

        console.log('client send data', data);

        socket.emit("Server-sent-data", data);

    });

});

// END STEP 2

server.listen(3000);

console.log('Server listen on http://127.0.0.1:3000')

Và đây là code khai báo socket io trên client.

<html>

<head>

<title>Demo Socketio - Homepage</title>

<script

            src="https://code.jquery.com/jquery-1.12.4.min.js"

            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="

            crossorigin="anonymous"></script>

            <script src= integrity="sha512-+l9L4lMTFNy3dEglQpprf7jQBhQsQ3/WvOnjaN/+/L4i0jOstgScV0q2TjfvRF4V+ZePMDuZYIQtg5T4MKr+MQ==" crossorigin="anonymous"></script>

<script>

var socket = io("http://localhost:3000");

$(document).ready(function() {

$("#send").click(function() {

socket.emit("Client-sent-data", "Hello world");

});

});

</script>

</head>

<body>

<div>

<button id="send">Send</button>

</div>

</body>

</html>

Vậy thì cơ chế tiếp nhận dữ liệu và truyền dữ liệu của socket io là gì? Để tiếp nhận và lắng nghe dữ liệu, hãy sử dụng câu lệnh socket.on(). Còn để phát dữ liệu thì hãy dùng câu lệnh socket.emit().

Giả sử phía client gửi 1 đoạn chat bất kỳ đến server thì nhiệm vụ của server lúc này là phải viết code và truyền tải dữ liệu đó đến server khác. Mặt khác, phía Client cũng cần phải viết code để có thể gửi hoặc tiếp nhận dữ liệu từ server.

Đây là code phía server

io.on("connection", function(socket)

{

socket.on("disconnect", function()

{

});

         //server lắng nghe dữ liệu từ client

socket.on("Client-sent-data", function(data)

{

//sau khi lắng nghe dữ liệu, server phát lại dữ liệu này đến các client khác

                socket.emit("Server-sent-data", data);

});

});

// create route, display view

Còn đây là code phía client

//client gửi dữ liệu lên server

$(document).ready(function()

{

$("#send").click(function()

{

socket.emit("Client-sent-data", "Hello world");

});

});

</script>

</head>

<body>

<h1>Demo Socketio</h1>

<div>

<button id="send">Send</button>

</div>

</body>

</html>

Chú ý: Parameter thứ 1 của cả socket.on và socket.emit đều là tên đường truyền. Có thể đặt tên đường truyền là bất kỳ nhưng nếu muốn truyền và nhận dữ liệu chung trong 1 đường truyền thì tên đường truyền phải giống nhau.

Trường hợp Client gửi sự kiện lên phía server, server sẽ lắng nghe sự kiện

Client send

$(document).ready(function()

{

$("#send").click(function()

{

socket.emit("Client-sent-data", "Hello world");

});

});

Server listen

socket.on("Client-sent-data", function(data)

{

});

Module socket io trong tương lai có thể sẽ phát triển hơn nữa để đáp ứng nhu cầu tốc độ lắng nghe và truyền dữ liệu ngày càng cao trong môi trường Internet. Thông qua bài viết trên, BizFly Cloud hy vọng giúp bạn phần nào hiểu được socket io là gì và tác dụng của nó trong việc phát triển ứng dụng web như thế nào. Cùng theo dõi tiếp các bài viết hay về công nghệ với BizFly Cloud nhé.

Theo Bizfly Cloud chia sẻ

BizFly Cloud là nhà cung cấp đa dịch vụ điện toán đám mây được vận hành bởi VCCorp.

BizFly Cloud là một trong bốn doanh nghiệp đáp ứng đầy đủ toàn bộ tiêu chí, chỉ tiêu kỹ thuật, an toàn thông tin của nền tảng điện toán đám mây phục vụ Chính phủ điện tử/chính quyền điện tử do Bộ TT&TT chứng nhận.

Độc giả quan tâm đến các giải pháp của BizFly Cloud có thể truy cập tại đây.

SHARE
Hỗ trợ kỹ thuật
Kinh doanh, CSKH