유사하게 시도하거나 내 블로그 에서 nodejs의 전체 샘플 코드를 확인할 수 있습니다.
페이지 쪽에서 :
https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js
var socket = io ();
- 이
emit함수를 사용하여 데이터를 nodeserver로 보냅니다.
socket.emit ( 'new_notification', {
메시지 : '메시지',
제목 : '제목',
아이콘 : '아이콘',
});
이제 코드는 다음과 같습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
var socket = io();
$(document).ready(function($) {
$('.rules-table').on('click', '.runRule', function(event) {
event.preventDefault();
/* Act on the event */
var ruleID = $(this).parents('tr').attr('id');
// send notification before going to post
socket.emit('new_notification', {
message: 'Messge is ready to sent',
title: title,
icon: icon,
});
$.ajax({
url: '/ajax/run-rule.php',
type: 'POST',
dataType: 'json',
data: {
ruleID: ruleID
},
})
.done(function(data) {
console.log(data);
// send notification when post success
socket.emit('new_notification', {
message: 'Messge was sent',
title: title,
icon: icon,
});
})
.fail(function() {
console.log("error");
// send notification when post failed
socket.emit('new_notification', {
message: 'Messge was failed',
title: title,
icon: icon,
});
})
.always(function() {
console.log("complete");
});
});
});
이제 노드 서버 측에서 요청을 받고 연결된 모든 장치 / 브라우저 (server.js)에 메시지를 보내기위한 처리기를 만듭니다.
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res) {
res.sendfile('index.html');
});
io.on('connection', function (socket) {
socket.on( 'new_notification', function( data ) {
console.log(data.title,data.message);
// Now Emit this message to all connected devices
io.sockets.emit( 'show_notification', {
title: data.title,
message: data.message,
icon: data.icon,
});
});
});
http.listen(3000, function() {
console.log('listening on localhost:3000');
});
이제 클라이언트 / 브라우저 / 클라이언트 측은 노드 서버에서 소켓 메시지를 수신하도록 수신자를 만듭니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
var socket = io();
/**
* Set Default Socket For Show Notification
* @param {type} data
* @returns {undefined}
*/
socket.on('show_notification', function (data) {
showDesktopNotification(data.title, data.message, data.icon);
});
/**
* Set Notification Request
* @type type
*/
function setNotification() {
showDesktopNotification('Lokesh', 'Desktop Notification..!', '/index.jpeg');
sendNodeNotification('Lokesh', 'Browser Notification..!', '/index.jpeg');
}
/**
* Check Browser Notification Permission
* @type window.Notification|Window.Notification|window.webkitNotification|Window.webkitNotification|Window.mozNotification|window.mozNotification
*/
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
Notification.requestPermission(function (permission) {
});
/**
* Request Browser Notification Permission
* @type Arguments
*/
function requestNotificationPermissions() {
if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
});
}
}
/**
* Show Desktop Notification If Notification Allow
* @param {type} title
* @param {type} message
* @param {type} icon
* @returns {undefined}
*/
function showDesktopNotification(message, body, icon, sound, timeout) {
if (!timeout) {
timeout = 4000;
}
requestNotificationPermissions();
var instance = new Notification(
message, {
body: body,
icon: icon,
sound: sound
}
);
instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
};
instance.onclose = function () {
// Something to do
};
if (sound)
{
instance.sound;
}
setTimeout(instance.close.bind(instance), timeout);
return false;
}