NPM(Node Package Manager)을 이용하여 webOS에서 외부모듈을 사용해보겠습니다.
- 외부모듈 설치하기
- 외부모듈 사용하기
- 외부모듈 예제
외부모듈 설치하기
1. 외부모듈이란?
앞 게시물에서 설명한 Core Modules외에도 추가로 설치해서 사용할 수 있는 외부모듈이 있습니다.
외부 모듈을 사용하면 내가 만든 모듈뿐만 아니라 다른 사람의 모듈도 사용 가능합니다.
2. 외부모듈 설치하기
외부모듈 중 web socket을 사용해보겠습니다.
web socket이란 웹 서버와 웹 브라우저 사이에서 실시간으로 상호 작용할 수 있도록 통신환경을 제공하는 기술입니다.
> npm install ws위의 명령어를 사용하여 ws라는 외부모듈 패키지를 설치해줍니다.
Windows PowerShell을 사용하여 설치를 완료한 모습입니다.
설치가 되면 node_modules라는 파일이 생성됩니다.
service 폴더 아래에 node_modules폴더를 넣어줍니다.
외부모듈 사용하기
ws: a Node.js WebSocket library 사이트를 참고하여 진행했습니다. ws모듈 외에 다른 모듈이 궁금하신 분들은 사이트에서 다른 모듈에 대한 정보를 찾을 수 있습니다.
1. index.html
function wsServerOn() {
console.log("call my service");
const url = 'luna://com.cosmos.nodeapp.service/wsServerOn';
const params = {};
bridge.onservicecallback = (msg) => {
console.log(msg);
let res = JSON.parse(msg);
document.getElementById("txt_msg").innerHTML = res.reply;
};
bridge.call(url, JSON.stringify(params));<button id="wsServerOn" onclick="wsServerOn()">WS Server</button>서버를 여는 버튼과 함수를 작성해줍니다.
2. service.js
const WebSocketServer = require('ws').WebSocketServer;
const port = 9000;새 WebSocketServer를 만들어 WebSocketServer를 지정하고, port에 포트 번호도 지정해줍니다.
(여기서 require은 import 함수와 비슷한 역할을 합니다.)
service.register("wsServerOn", function(message) {
const wss = new WebSocketServer({
port: port
});
wss.on('connection', (ws) => {
ws.addEventListener('message', handleMessage);
console.log("Someone has been connected");
// ws.send('Hello');
});
// ==== heartbeat 구독
const sub = service.subscribe(`luna://${pkgInfo.name}/heartbeat`, {subscribe: true});
const max = 120;
let count = 0;
sub.addListener("response", function(msg) {
console.log(JSON.stringify(msg.payload));
if (++count >= max) {
sub.cancel();
setTimeout(function(){
console.log(max+" responses received, exiting...");
process.exit(0);
}, 1000);
}
});
message.respond({
reply: "websocket server open"
});
});서비스를 등록해줍니다.
시간이 지난 후에도 서비스를 계속 이용할 수 있도록 heartbeat 구독을 해줍니다.
hearbeat에 대한 자세한 설명은 hearbeat 포스팅을 참고해주세요.
외부모듈 예제
1. 디바이스 연결
websocket과 연결하기 위해 디바이스를 연결해줍니다.
2. index.html (클라이언트)
클라이언트 페이지를 만듭니다.
메시지를 입력한 후 전송버튼을 누르면 메시지가 웹소켓을 통해 전송됩니다.
3. service.js (클라이언트)
소켓이 연결되면 화면에 소켓이 연결되었다는 메시지가 뜹니다.
전송버튼을 눌러 메시지가 전송되면 클라이언트의 화면에도 보냈던 메시지들이 남습니다.
클라이언트 전체 코드
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Node websocket example</title>
<link rel="stylesheet" href="./css/index.css">
<!-- <script src="/socket.io/socket.io.js"></script> -->
<script src="./js/index.js"></script>
</head>
<body>
<div id="main">
<div id="chat-input">
<input type="text" id="test" placeholder="메시지를 입력해주세요..">
<button onclick="send()">전송</button>
</div>
<div id="chat">
<!-- 메시지 영역 -->
</div>
</div>
</body>
</html>
- index.js
var socket = new WebSocket('ws://10.50.51.100:9000', "protocolOne");
let name = '';
/* 접속 되었을 때 실행 */
socket.onopen = (event) => {
document.getElementById('chat').innerHTML += `</br>소켓이 연결되었습니다.`;
};
socket.onmessage = (event) => {
// message 받았을 때 처리하는 내용 작성
console.log(event.data);
};
/* 메시지 전송 함수 */
function send() {
// 입력되어있는 데이터 가져오기
var message = document.getElementById('test').value;
// 가져왔으니 데이터를 빈칸으로 변경
document.getElementById('test').value = '';
// 내가 전송할 메시지 클라이언트에게 표시
document.getElementById('chat').innerHTML += `</br>[Send]: ${message}`;
// 서버로 message 이벤트 전달 + 데이터와 함께
socket.send(JSON.stringify({type: 'message', text: message}));
}3. 결과
webOS화면에서 "WS Server" 버튼을 클릭하면 websocket서버가 열리고 화면에 "websocket server open"메시지가 반환됩니다.
client의 index.html 파일을 실행시키면 웹소켓과 연결되고 소켓이 연결되었다는 메시지가 화면에 뜹니다.
클라이언트에서 메시지를 입력하고 전송버튼을 누르면 webOS에서 toast메시지가 출력됩니다.
이후에도 같은 방법으로 메시지를 전송할 수 있습니다.
'webOS Article > 3. Web Service 개발하기' 카테고리의 다른 글
| Booting시 내 앱과 서비스가 실행되도록 만들기 (1) | 2021.09.26 |
|---|---|
| Nodejs를 이용한 웹서비스 개발 (0) | 2021.09.19 |
| heartbeat 사용하기 (2) | 2021.09.19 |
| webOS 서비스에서 다른 서비스 호출하기 (1) | 2021.09.19 |
| 웹서비스 개발하기 (0) | 2021.08.22 |