. ws/express 모듈 설치
$ npm install ws
$ npm install express.디렉토리 구조
$ pwd
/home/naya/www/socket
$ ls -al
-rw-rw-r-- 1 nya nya 1388 11월 8 15:49 app.js
-rw-rw-r-- 1 nya nya 1547 11월 8 15:50 index.html
drwxrwxr-x 53 nya nya 4096 11월 8 15:43 node_modules
-rw-rw-r-- 1 nya nya 32132 11월 8 15:43 package-lock.json
-rw-rw-r-- 1 nya nya 73 11월 8 15:43 package.json$ vi app.js
const path = require("path");
const express = require('express');
const app = express();
app.use("/", (req, res)=>{
res.sendFile('/home/nya/www/socket/index.html'); // index.html 파일 응답
})
const HTTPServer = app.listen(30001, ()=>{
console.log("Server is open at port:30001");
});
const wsModule = require('ws');
const webSocketServer = new wsModule.Server(
{
server: HTTPServer, // WebSocket서버에 연결할 HTTP서버를 지정한다.
//port: 30002, // WebSocket연결에 사용할 port를 지정한다(생략시, http서버와 동일한 port 공유 사용)
}
);
webSocketServer.on('connection', (ws, request)=>{
const ip = request.headers['x-forwarded-for'] || request.connection.remoteAddress;
console.log(`새로운 클라이언트[${ip}] 접속`);
if(ws.readyState === ws.OPEN){
ws.send(`클라이언트[${ip}] 접속을 환영합니다 from 서버`); // 데이터 전송
}
ws.on('message', (msg)=>{
console.log(`클라이언트[${ip}]에게 수신한 메시지 : ${msg}`);
ws.send('메시지 잘 받았습니다! from 서버')
})
ws.on('error', (error)=>{
console.log(`클라이언트[${ip}] 연결 에러발생 : ${error}`);
})
ws.on('close', ()=>{
console.log(`클라이언트[${ip}] 웹소켓 연결 종료`);
})
});$ index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹소켓</title>
</head>
<body>
<h1>웹소켓 테스트</h1>
<!-- 버튼 2개 생성 -->
<button id="btn_send">메시지 전송</button>
<button id="btn_close">연결 끊기</button>
<script>
// 1. 웹소켓 클라이언트 객체 생성
const webSocket = new WebSocket("ws://221.1.1.1:30001");
webSocket.onopen = ()=>{
console.log("웹소켓서버와 연결 성공");
};
webSocket.onmessage = function (event) {
console.log(`서버 웹소켓에게 받은 데이터: ${event.data}`);
}
webSocket.onclose = function(){
console.log("서버 웹소켓 연결 종료");
}
webSocket.onerror = function(event){
console.log(event)
}
let count = 1;
document.getElementById("btn_send").onclick = function(){
if(webSocket.readyState === webSocket.OPEN){
webSocket.send(`증가하는 숫자를 보냅니다 => ${count}`);
count++;
}else{
alert("연결된 웹소켓 서버가 없습니다.");
}
}
document.getElementById("btn_close").onclick = function(){
if(webSocket.readyState === webSocket.OPEN){ // 연결 상태 확인
webSocket.close(); // 연결 종료
}else{
alert("연결된 웹소켓 서버가 없습니다.");
}
}
</script>
</body>
</html>.서버 실행
$ node app.js.웹브라우져 접속
http://221.1.1.1:30001/.이슈
npm ws 후 서버 실행하면 ...option 에러 발생
-> node 낮은버전 삭제후 node 16 설치
https://trytoso.tistory.com/1557
npm node.js 16.x install설치
.기존 node npm 삭제 $ yum remove nodejs npm .node 16.x 설치 $ yum install -y gcc-c++ make $ curl -sL https://rpm.nodesource.com/setup_16.x | sudo -E bash - $ sudo yum install -y nodejs $ node -v
trytoso.tistory.com
'프로그래밍 > Js' 카테고리의 다른 글
| Shared Workers 이용하여 WebSocket 연결 방법 (웹소켓을 연결한 상태에서 새로고침 또는 다른 페이지로 이동시 웹소켓 연결을 유지하는게 목적) (0) | 2021.12.17 |
|---|---|
| 웹워커 안에서 웹소켓 구동 시험 테스트 + Node 소켓 서버 (0) | 2021.11.09 |
| [ES6+] 버튼 클릭시 클랙스 메소드 바로실행(if문 사용 안함) (0) | 2021.11.04 |
| service worker push API 제작기 (1) - 권한요청 (0) | 2021.10.29 |
| HTTP fetch() 요청 취소하는 방법 (0) | 2021.10.28 |