Node.js, JavaScript의 Websocket을 이용해 간단한 셀프 채팅 어플리케이션을 구현하겠습니다.
웹소켓의 기본적인 구성은 다음과 같습니다.
2단계로 구성한 웹소켓
굳이 개념치 않다면 안보셔도 무방합니다.
■ ws 설치
$ npm install ws
우선 npm 명령어로 ws (web socket) 을 설치하도록 하겠습니다.
■ Server.js
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer( { port: 8900 } ); // 포트번호는 자유롭게 작성해주세요.
wss.on( 'connection', function(ws){
console.log("connected");
// 클라이언트가 메시지를 전송했을 때 수신하여 다시 보내는 과정.
ws.on( 'message', function(msg){
console.log("msg[" + msg + "]" );
ws.send( msg );
});
});
포트번호(port)는 본인이 사용하는 포트번호를 지정하면 됩니다.
그리고 구동하는 방법은 터미널에서
$ node server.js
로 js파일을 구동시킵니다.
■ Client.html
html파일이던 php파일이던 상관없습니다. 중요한건 javascript로 한다는 것이니까요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input id="Send" type="text" autofocus> <!--메시지 작성 영역-->
<button type="button" onclick="sendMessage();" >Send</button> <!--전송버튼-->
</form>
<div id="Recv"></div> <!-- 보낸 메시지가 기록되는 곳 -->
<script>
$( document ).ready( function() {
var txtRecv = $('#Recv');
ws = new WebSocket("ws://localhost:8900");
// websocket 서버에 연결되면 연결 메시지를 화면에 출력한다.
ws.onopen = function(e){
txtRecv.append( "connected<br>" );
};
// websocket 에서 수신한 메시지를 화면에 출력한다.
ws.onmessage = function(e){
txtRecv.append( e.data + "<br>" );
};
// websocket 세션이 종료되면 화면에 출력한다.
ws.onclose = function(e){
txtRecv.append( "closed<br>" );
}
});
// 사용자가 입력한 메시지를 서버로 전송한다.
function sendMessage() {
var txtSend = $('#Send');
ws.send( txtSend.val() );
txtSend.val( "" );
txtSend.focus()
}
</script>
</body>
</html>
■ 결과
· 서버 구동 -> 연결 -> 페이지 접속마다 터미널에 "connected" 라는 로그가 찍힙니다.
· 메시지를 작성하고 버튼을 통해 전송하였을 때,
■ 결론
-> 몇가지 보완할 내용이 존재하긴 하다.
1. jQuery로 작성하였다는 점. -> 필자는 jQuery를 선호하지 않는다. 비동기통신 위주로 사용하는 스타일인데, 예전에는 ajax 사용할 때 사용했지만, 요즘은 axios 위주로 사용하기 때문에 이마저도 잘 사용하지 않는다.
2. 사소한 버그가 있다. -> 메시지를 작성하고 송출하였을 때, 해당 메시지가 웹페이지에 제대로 출력이 되지 않고, [ Object Object ] [ Blob ] 이런식으로 작성되더라. -> e.data를 통해 해당 내용을 append 시켜 작성하였는데, 아무래도 해당 node 자체가 입력이 된것이라 판단하다. -> 해결방법으로 <p> 를 하나 생성해서 해당 내용을 생성하여 삽입할 수 있다.
systemctl status apache2.service
● apache2.service - The Apache HTTP Server
Loaded: loaded (/lib/systemd/system/apache2.service; enabled; vendor preset: enabled)
Active: failed (Result: exit-code) since Wed 2021-10-27 14:16:45 KST; 16min ago
Docs: https://httpd.apache.org/docs/2.4/
Process: 475439 ExecStart=/usr/sbin/apachectl start (code=exited, status=1/FAILURE)
10월 27 14:16:45 server systemd[1]: Starting The Apache HTTP Server...
10월 27 14:16:45 server apachectl[475447]: apache2: Syntax error on line 231 of /etc/apache2/apache2.conf: Could not open configuration file /etc/phpmyadmin/apache.conf: No such file or directory
10월 27 14:16:45 server apachectl[475439]: Action 'start' failed.
10월 27 14:16:45 server apachectl[475439]: The Apache error log may have more information.
10월 27 14:16:45 server systemd[1]: apache2.service: Control process exited, code=exited, status=1/FAILURE
10월 27 14:16:45 server systemd[1]: apache2.service: Failed with result 'exit-code'.
10월 27 14:16:45 server systemd[1]: Failed to start The Apache HTTP Server.
환경: Linux Ubuntu 20.0.4LTS, PHP8, Apache 사용
사전 작업 : php7.4 -> php 8.0으로 업그레이드 (완료)
이에 해당하는 에러를 어떤 사람이 /etc/apache2/apache2.conf 파일의 수정을 통해 해결했다는 내용이 있었다.
이에 맞춰 apache2.conf 를 자세히 보던 와중 에러 문구가 눈에 띄었다.
phpmyadmin 부분에서 문제라는 것을 확인하였다.
그래서 과감하게 (사실은 소심하게 주석까지 해주면서ㅋㅋ) phpmyadmin을 사용하지 않으니 해당 부분을 주석처리하여 서버(server)를 구동할 때 해당 부분을 읽지 않게하였더니 성공.
=> 하지만 이것은 phpmyadmin을 사용하시는 분들은 하면 안된다는 것을 확인해주세요.
아무래도 php 버전업그레이드(7.4->8.0 upgrade)를 하면서 phpmyadmin 고유의 데이터베이스(database)를 놓고, 해당 부분을 추가적으로 손보지 않았기 때문에 이러한 에러가 발생한 것 같았다.
