Bạn sử dụng CodeIgniter để xây dựng website và cần tích hợp Socket IO để thực hiện một số tính năng Realtime?
Ngay bên dưới đây là hướng dẫn một cách chi tiết việc Cài đặt và tích hợp Socket IO vào Codeigniter dành cho bạn đây.
PHẦN 1: CÀI ĐẶT MÔI TRƯỜNG
1. Cài Node
Để thực hiện cài Node chúng ta các chạy lệnh sau:
– Refesh index các gói cài đặt hiện có trên máy của bạn:
sudo apt update
– Cài NodeJs chạy lệnh:
sudo apt install nodejs
Kiểm tra đã cài đặt thành công hay không bằng cách chạy lệnh kiểm tra phiên bản Node sau:
node -v
Kết quả trả về phiên bản của Node là thành công.
2. Cài NPM
NPM là thư viện quản lý các gói cho Node modules. Để cài đặt NPM chúng ta chạy lệnh sau:
sudo apt install npm
3. Cài Socket.IO
– Bạn cần di chuyển thư mục làm việc của mình về thư mục góc của host chạy ứng dụng codeigniter. Ví dụ: public_html, htdoc,… bằng cách sử dụng lệnh:
cd đường_dẫn_đến_thư_mục_cần_cài_đặt
– Sau đó, thực hiện cài Socket.IO bằng lệnh:
npm install socket.io --save
PHẦN 2: CÀI ĐẶT TRONG CODEIGNITER
Để tích hợp Socket IO vào CodeIgniter để làm các chức năng gọi là realtime, chúng ta thực hiện như sau:
1. Tạo file server.js ở thư mục góc của ứng dụng với nội dung sau:
const { readFileSync } = require("fs");
const { createServer } = require("https");
const { Server } = require("socket.io");
//Cấu hình SSL
const httpsServer = createServer({
key: readFileSync("duong_dan_den_file_ssl.key"),
cert: readFileSync("duong_dan_den_file_ssl.cert")
});
//Cấu hình cho phép CORS domain https://yourdomain.com
const io = new Server(
httpsServer,
{
cors: {
origin: "https://yourdomain.com"
}
}
);
//Xử lý trả dữ liệu
io.on('connection', function (socket) {
//console.log('CHAY TOI DAY');
//console.log('Server listening at port %d', port, "clientID", socket.id);
//console.log(socket.clientId)
/*socket.on("hello", (arg) => {
console.log("ancb = ",arg); // world
});
*/
//Lăng nghe và phản hồi với message là 'hkg-joined'
socket.on('hkg-joined', function( data ) {
console.log("Đã nhận: ", data.message)
io.emit('hkg-joined', {
message: data.message,
date: data.date,
msgcount: data.msgcount
});
});
//Lăng nghe và phản hồi với message là 'hkg-stated'
socket.on('hkg-stated', function( data ) {
console.log("Đã nhận: ", data.message)
io.emit('hkg-stated', {
message: data.message,
date: data.date,
msgcount: data.msgcount
});
});
//Lăng nghe và phản hồi với message là 'hkg-messaged'
socket.on('hkg-messaged', function( data ) {
console.log("Đã nhận: ", data.message)
io.emit('hkg-messaged', {
message: data.message,
date: data.date,
msgcount: data.msgcount
});
});
//Lắng nghe và phản hồi với các message khác ở đây,... có thể viết thêm theo nhu cầu của mình
});
httpsServer.listen(3000);
2. Tạo lần lượt các file view, controller để test như sau:
2.1. File view:
<style>
h3{
font-family: Verdana;
font-size: 18pt;
font-style: normal;
font-weight: bold;
color:red;
text-align: center;
}
</style>
<h3>
Realtime Notification using Socket.IO in Codeigniter
</h3>
<?php echo form_open( 'message/send',array( 'name'=>
'message','method'=>'post')); ?>
<div class="container">
<div style="float:right;">
<p>
<h4>
Messages:
<b>
<span id="msgcount">
</span>
</b>
</h4>
</p>
</div>
<div class="col-md-3">
<p>
<input type="text"placeholder="Type Here..."class="form-control"size="20px"id="message"name="message" />
</p>
</div>
<div class="col-md-3">
<input type="button"class="btn btn-primary"id="send"name="send"value="Send"/>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<table class="table">
<thead>
<tr>
<th>
Date
</th>
<th>
Message
</th>
</tr>
</thead>
<tbody id="message-tbody">
</tbody>
</table>
</div>
<?php echo form_close();?>
<!-- <scriptsrc="<?php echo base_url('assets/js/jquery-1.11.2.min.js');?>"></script>
<scriptsrc="<?php echo base_url('assets/js/bootstrap.min.js');?>"></script>
-->
<script src="<?php echo base_url('node_modules/socket.io/client-dist/socket.io.js');?>">
</script>
<script>
const socket = io.connect('https://yourdomain.com:3000');
socket.on('hkg-messaged', function (data) {
//console.log(data);
$("#message-tbody").prepend('<tr><td>' + data.date + '</td><td>' + data.message + '</td></tr>');
$("#msgcount").text(data.msgcount);
});
$(document).ready(function () {
$(document).on("click", "#send", function () {
var dataString = {
message: $("#message").val()
};
$.ajax({
type: "POST",
url: "<?php echo $them_tinhan_url;?>",
data: dataString,
dataType: "json",
cache: false,
success: function (data) {
//console.log(data)
if (data.success == true) {
var socket = io.connect('https://yourdomain.com:3000');
socket.emit('hkg-messaged', {
message: data.message,
date: data.date,
msgcount: data.msgcount
});
}
}, error: function (xhr, status, error) {
alert(error);
},
});
});
});
</script>
2.2. File Controller
Trong đó, viết hàm xử lý lưu dữ liệu tin nhắn gửi đến như dưới đây:
public function them()
{
$now=getdate();
$arr['message'] = $this->input->get_post('message',true).' - '.$now[0];
$arr['date'] = $now['mday'].'/'.$now['mon'].'/'.$now['year'];
$arr['msgcount'] = 1;
$arr['success'] = true;
echo json_encode($arr);
}
3. Chỉnh cấu hình file router
Ở đây bạn chỉnh theo nhu cầu sử dụng của mình, không nhất thiết phải làm y như hướng dẫn bên dưới đây:
$route['message/send'] = 'sendcontroller/them';
4. Chạy file server.js bằng lệnh:
Để khởi chạy server node ứng dụng đã viết ở file server.js ở trên, chúng ta cần thực hiện lệnh sau:
node server.js
Đến đây, việc cài đặt và tạo ứng dụng test hoàn tất, bạn test thử ứng dụng đi nào!
Hy vọng hữu ích với bạn!
Nosomovo
