Node.js 실시간 채팅 > 그누보드5 플러그인

그누보드5 플러그인

그누보드는 다양한 기능을 추가하기 쉽습니다.

Node.js 실시간 채팅 정보

Node.js 실시간 채팅

첨부파일

g5chat_1.3.2-marina0.zip (71.4K) 237회 다운로드 2022-02-04 17:50:33 포인트 차감750
테스트한 버전5.4.18
호환 가능 버전모든버전

본문

주의사항

익스플로러에서는 작동 하지 않습니다. 다른 브라우저를 사용해주세요.

 

댓글의 경우 답변이 늦거나 오지 않을 수 있습니다.

(이메일 필요 시 *** 개인정보보호를 위한 이메일주소 노출방지 *** 으로)

 

데모 http://g5.test.choyunjin.kr/

 

설치 방법

그누보드외 추가준비물 : node.js (https://nodejs.org)

1.


create table `g5_chat_messages` (
    `ch_id` int not null auto_increment primary key,
    `ch_mb_id` varchar(1024) not null,
    `ch_msg` text not null,
    `ch_date` datetime not null,
    `ch_last_modified` datetime not null
)default charset=utf8mb4 engine=InnoDB;
 
create table `g5_chat_banlist` (
    `ba_id` int not null auto_increment primary key,
    `ba_mb_id` varchar(1024) not null unique key,
    `ba_reason` text default null
)default charset=utf8mb4 engine=InnoDB;

위 쿼리문 2개를 db서버에서 실행합니다.

(charset 부분과 engine 부분, 테이블 접두사(g5_) 부분은 자신에게 맞게 고쳐주세요)

 

2. 파일을 다운로드하고, g5 폴더안의 모든 것을 그누보드루트에 그대로 올려줍니다.

3. node 폴더는 웹서버 루트 밖에 적당한 위치에 넣어줍니다.

4. 자신의 웹서버 컴퓨터에 ssh로 접속합니다.

5. 채팅서버파일(server.js,config.js,package.json,controllers 폴더)이 있는 폴더(아까 그 node 폴더)로 이동합니다.

6.


npm install

위 명령을 실행해줍니다.

 

7. config.js에서 db설정/ssl설정을 자신에게 맞게 수정해줍니다.

ssl 설정의 경우 다음과 같이 입력합니다.


// ...
    main:{ // 기본 설정
        port:      1121,
        use_https: true, // ssl 사용하지 않을 경우 false 로 설정
        https_credentials:{
            cert:'(fullchain 파일 경로)',
            key: '(private key 파일 경로)'
        }
    },
// ...

 

8. node server 명령을 실행합니다.(항상 실행은 pm2나 screen 등을 쓰시면 됩니다)

 

9. node 서버와 그누보드 서버를 분리하는 경우 extend 폴더의 chat.extend.php를 다음과 같이 수정합니다.


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
 
// 채팅서버 웹소켓 프로토콜
define('G5_CHAT_WS_PROTOCOL','');
 
// 채팅서버 hostname
define('G5_CHAT_WS_HOSTNAME','(node서버 ip주소 또는 도메인)');
 
// 채팅서버 포트
define('G5_CHAT_WS_PORT','1121'); // node서버의 포트 입력. 기본값으로 놔둔 경우 여기도 그대로 놔둔다

 

10. 끝!(접속 : http://사이트주소/(그누보드루트/)chat)

 

기타 :

사용자 밴 :
/ban 사용자명 사유
사용자 밴 사유 수정 :
/ban 밴된사용자명 바꿀사유
밴 해제 :
/unban 사용자명
밴된 사용자 목록 :
/banlist
닉네임 강조 : 밑줄 :
==글씨==
취소선 :
--글씨--

굵게/기울임체 : 마크다운과 같음

링크 :

[url]
또는
[보여줄 텍스트](url)
 (괄호를 ]( 이렇게 붙여 써야 합니다)

또는 url앞에 타겟: 이렇게 붙일수도 있습니다(타겟앞에 _는 붙이지않습니다)

 

2020-05-07 Mysql 커넥션이 자동으로 끊기는 오류를 수정하여 재업 하였습니다.

2020-05-08 현재 접속자 표시 기능을 추가하여 재업 하였습니다.

2020-05-11 history 기능을 추가하여 재업 하였습니다.

2020-05-14 자신이 보낸 메시지의 css를 변경하여 재업 하였습니다.

2020-05-18 html 태그를 제거하는 구문 추가 + 일부 css 등을 변경하여 재업 하였습니다.

2020-05-26 사용자 차단 기능을 추가하여 재업 하였습니다.

2020-05-29 사용자 차단 해제 기능/node.js서버와 웹서버의 도메인이 다를 시 cors 오류 방지 코드를 추가하여 재업 하였습니다.

2020-06-07 각종 서식(굵은글씨 등)과 url링크, 사용자 닉네임 강조 기능을 추가하였습니다.

2020-06-27 서식 부분 수정 후 재업 하였습니다. 링크서식을 #{(타깃:)링크}# 이(가) 아닌 {(타깃:)링크} 을 사용해주세요.

2020-10-05 charset 지정이 가능하도록 수정+common.css 일부 수정했습니다.

2021-08-14 프로그램과 db구조를 전면적으로 갈아엎고 package.json 파일과 ssl 대응 기능을 추가했습니다.

2021-08-20 chat.extend.php 파일 추가(node서버 호스트명 변경 가능)

2022-02-04 /unban 명령어 버그 수정+명령어 입력값 검증 추가+/banlist 명령어를 추가했습니다.

추천
8

댓글 전체

카페24에 문의하니 node.js 호스팅을 별도로 신청해야 한다는군요. 공용서버에 부담을주어 user들에게 피해를 줄 수 있다고 하네요.
node.js가 이미 설치되어 있는 가정 하에 설명하는 겁니다.
node.js 설치는
윈도우 : nodejs 사이트에서 인스톨러 받아서 깔면됩니다
리눅스 : vvvvvv
우분투 :
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

centos (이것 외에 추가로 명령어를 실행해야 할수도 있습니다) :
curl -sL https://rpm.nodesource.com/setup_12.x | sudo bash -
이렇게 명령어를 실행하면 됩니다.
6번 구문은 node.js 폴더에서 추가 모듈을 설치하는 명령어입니다.
nodejs호스팅서버에 node폴더를 올려준뒤, screen등에서 node server.js 를 실행하시고 웹서버 그누보드루트에 chat폴더를 올려주시고, chat/js/common.js 파일의
... 'ws://'+location.hostname+':1121/ ...(1라인쯤에 있습니다)
에서 '+location.hostname+' 부분을 nodejs 호스팅서버 도메인주소(혹은 ip주소)로 수정하시고 접속하시면 될겁니다(node폴더의 config.js에서 DB설정을 자신에게 맞게 바꿔주세요)
node호스팅서버 따로 받았고 그누보드가 설치된 호스팅이 따로있는데
config.js의 db에서 그누보드 db를 가져오는데 이건 어떻게 처리하면될까요.
config.js의 db정보에는 node호스팅의 db를 셋했는데...
그누보드 가 올려진 사이트의 데이타는 어떻게 가져와야하는지 모르겟네요
여기설정부분이 이해가 가질않네요 .

function LivechatServerConfig(){
    this.db = new function(){ // db 설정
        this.host      = '127.0.0.1';  호스트부분은 아이피만 적으면 되는건가요?
        this.port      = 3306;    여기 포트부분이 ssh 접속할때 포트인가요 아님 아파치에 설정된 포트인가요?
        this.user      = 'ahhhhhh';
        this.password  = 'animalcrossinghagoshipeunde';
        this.dbname    = 'switchgaeopdda_ahhhhhh';  여기는 그누보드 db 네임을 적는건가요?
    }();
    this.main = new function(){ // 기본 설정
        this.port = 1121;  <--여기 포트는 어떤포트를 적는곳인가요? 아니면 건드리지않아도 되는건가요?
    }();
    this.table = new function(){ // 테이블 이름
        this.prefix  = 'g5_'; // 테이블 접두사
        this.member  = this.prefix+'member';
        this.livechat = this.prefix+'livechat';
        this.banlist = this.prefix+'livechat_banlist';
    }();
}
첫번째 port는 DB서버 포트이구요, 두번째 port는 socket서버 포트입니다.
dbname은 그누보드DB이름을 적는겁니다. host는 포트없이 ip나 도메인만 적으면 됩니다.
node호스팅과 웹호스팅을 받아서 node호스팅에
server폴더에 있는파일을 업로드하였고 웹호스팅에 그누보드와 chat 폴더를 업로드하였습니다.

node호스팅의 db접속은 웹호스팅에 해두었고, 채팅폴더에있는 common.js에
var socket = io.connect('ws://"+노드서버도메인+":1121/index.goza?mb_id='+mb_id);
처럼 해두었는데 안되네요..
저기 1121은 어떤포트인지 socket포트라면, socket 포트는 어디서 보나요..
socket.io.js?ver=20200427:2 GET 홈페이지도메인.com:1121/socket.io/?mb_id=admin&EIO=3&transport=polling&t=NBfVMW3 net::ERR_CONNECTION_TIMED_OUT

이렇게 나오면서 계속 서버연결이 실패했다고 나오는데.. 어디를 손봐야되는거죠 ㅜㅜ
혹시몰라서 1121 포트도 열고 다했는데 안되네요.. ㅜㅜ
네 ㅜㅜ 노드를 열었는데도 안되요
node server.js명령어후

Server is running. port: 1121
Mysql: Successfully connected.

이렇게 뜨면 되는거아닌가요?
1. 질의문(create table어쩌고 그부분)을 모두 복사한다.
2. DB클라이언트로 DB서버에 접속하고 (phpmyadmin 써도됨)그누보드가 설치된 db 선택 후 쿼리(query) 탭에 들어가서 그 내용을 붙여넣습니다.
3. g5_ ,myisam,utf8 부분은 각각 테이블접두사, db엔진(그대로 놔두셔도 되긴합니다),db 문자인코딩으로 수정합니다.
4. 실행합니다.
/chat/css/common.css 를


html {overflow-y:auto}
html, body {height:100%}
ul li{list-style:none;}
.send_button{background-color:#bbb;width:40px;height:40px;line-height:38px;text-align:center;border-radius:999px;display:inline-block;font-size:17px;position:relative;bottom:14px;right:-6px;}
.send_button:hover{color:#a300ff;}
.user_tag{color:#a300ff;}

.wrap_chat {height:100%}
.wrap_chat .cont_chat{margin-bottom:15px;}
.wrap_chat .header {background-color:#a300ff;position:fixed;top:0;left:0;z-index:10;width:100%}
.wrap_chat .header>.title_area {display:flex;align-items:center;justify-content:center;min-height:50px;font-size:14px;font-weight:bold;color:#fff}
.wrap_chat .cont_chat {overflow-y:auto;overflow-x:hidden;position:absolute;left:0;bottom:55px;width:100%;top:50px;padding-bottom:10px}
.wrap_chat .cont_chat>ul {padding:8px 15px 8px;}
.wrap_chat .cont_chat>ul>li {padding:8px 0;}
.wrap_chat .cont_chat>ul>li.notice {color:#959595;text-align:center}
.wrap_chat .cont_chat>ul>li>.inner_talk {display:block;float:left;clear:both;margin-bottom:15px;}
.wrap_chat .cont_chat>ul>li>.inner_talk>.user_thumb {display:inline-block}
.wrap_chat .cont_chat>ul>li>.inner_talk>.user_thumb>a {overflow:hidden;position:relative;width:40px;height:40px;border-radius:50%;display:block;margin-bottom:15px}
.wrap_chat .cont_chat>ul>li>.inner_talk>.user_thumb>a:after {position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid rgba(0, 0, 0, 0.06);border-radius:50%;content:'';margin-bottom:10px}
.wrap_chat .cont_chat>ul>li>.inner_talk>.talk_info {padding-left:7px;display:inline-block;}
.wrap_chat .cont_chat>ul>li>.inner_talk>.talk_info>.name {font-size:13px;white-space:nowrap;}
.wrap_chat .cont_chat>ul>li>.inner_talk>.talk_info>.bubble {margin-top:5px;overflow:hidden;z-index:0;max-width:100%;border-radius:3px 20px 20px;font-size:13px;background-color:#f4f4f4;word-break:break-all;word-break:break-word;word-wrap:break-word;vertical-align:bottom}
.wrap_chat .cont_chat>ul>li.me>.inner_talk{float:right;}
.wrap_chat .cont_chat>ul>li.me>.inner_talk>.talk_info>.bubble{border-radius:20px 20px 3px;background-color:#dbbdff;}
.wrap_chat .cont_chat>ul>li>.inner_talk>.talk_info>.bubble>.txt {padding:9px 12px;white-space:pre-wrap;word-break:break-all;}
.wrap_chat .cont_chat>ul>li>.inner_talk>.talk_info>.bubble:after {content:'';display:block;clear:both}
.wrap_chat .box_chat {position:fixed;left:0;bottom:0;width:100%;}
.wrap_chat .box_chat>.frame_msg {position:relative;background-color:#fff;border-top:1px solid #000;}
.wrap_chat .box_chat>.frame_msg textarea {outline: none;}
.wrap_chat .box_chat>.frame_msg>.tf_msg {width:calc(100% - 105px);overflow-y:auto;height:41px;/*position:fixed;bottom:0;*/padding:8px 12px;margin:14px 15px;margin-bottom:0;/*border:0 none;*/font-size:13px;resize:none;/*border:1px solid #000;*/border-radius:100px;}


위와 같이 잡아주니 딱 좋네요.
실시간 채팅 - 접속자 : 1명은 어떻게 표시하는건가요?

index.php를 보니


<div class="title_area">실시간 채팅</div>


위와 같이만 표기되어있더라구요.
SSL 환경 적용 방법

1. node 폴더에 있는 server.js 에 있는 http를 전부 https로 바꾼다.

앞부분에


const cfg = require('./config.js'); // 설정파일
const lib = require('./lib.js'); // 라이브러리

// 모듈
var fs = require('fs');
var privateKey = fs.readFileSync('/SSL인증서경로/privkey.pem')
var certificate = fs.readFileSync('/SSL인증서경로/fullchain.pem');
var credentials = {key: privateKey, cert: certificate};
const app = require('express');
const https = require('https').createServer(credentials,app);
const io = require('socket.io')(https);


위와 같이 수정한다.

SSL 인증서 경로는 상대경로나 절대경로 모두 인식한다.


2. js 폴더에 있는 common.js에서 첫번째 줄에


var socket = io.connect('wss://도메인:nodejs포트/index.acnh?mb_id='+mb_id);


nodejs포트는 node폴더에 있는 config.js 파일에 10번째 줄에 있는 this.port 와 같아야 합니다.

그리고 반드시 nodejs의 포트는 외부 노출이 되어야합니다. 즉, 방화벽을 해제해야 합니다.
node 서버도 Successfully connected. 뜨는거보니 잘실행된거같은데 서버에 아무 반응이 없어요...
/chat들어가서 채팅을쳐도 주소창에 /chat/#만뜨고 아무반응이없고 혹시 몰라 node서버 주소로
아이피주소:1121로 들어가도 스크린에서 아무 로그도 안뜨고 무한로딩에 '아이피주소에서 전송한 데이터가 없습니다.'라고 뜨네요...
서버는 정상적으로 Server is running. port: 1121
Mysql: Successfully connected. 켜지는것 같은데 주소/chat으로 들어가면 node서버가 바로 팅겨버리네요...
아닙니다. 테스트 하려고 카페24 가상서버 사용중이고 ssl적용 않했습니다. 퍼미션 같은 문제가 있을까요? 왜... db를 못가지고 오는지 모르겠네요...
안녕하세요 현재 해당 채팅 프로그램을 구동중인데
아래와 같은 오류가 납니다.
모듈은 모두 설치했는데 혹시 더 설치해야할게 있나요?
우분투 1604 환경이고
nodejs 버전 v12.19.1                                                                       
npm 버전 6.14.8 
입니다.

다른 nodejs 예제는 다 잘실행되는데 이것만 이런 에러가나네요..
[root@alice830720 node]# node server.js
/var/www/html/testmoa/node/config.js:2
    this.db = new (() => {
              ^

TypeError: (intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value)(intermediate value) is not a constructor
    at new LivechatServerConfig (/var/www/html/testmoa/node/config.js:2:15)
    at Object.<anonymous> (/var/www/html/testmoa/node/config.js:21:18)
    at Module._compile (module.js:577:32)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.require (module.js:504:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/var/www/html/testmoa/node/server.js:1:75)

node server.js 명령어를 실행하면 위같이 나오는데 어느부분이 오류인지알수있을까요?
this.db = new (()  요거 에러랑 io.set('origins','*:*'); 에러 있길래
function() 으로 바꾸고, io.set('origins','*:*'); 은 주석처리했습니다. 혹시 오류나시는 분들 참고하세요
Access to XMLHttpRequest at 'http://test.com:1121/socket.io/?mb_id=111111&EIO=3&transport=polling&t=NW_POrT' from origin 'http://test.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

위 오류때문인지 채팅서버에 연결할 수 없다고 뜨네요.
http://test.com:1121/socket.io/?mb_id=111111&EIO=3&transport=polling&t=NW_PsxE
웹에서 위주소로 접속해보면
{"code":5,"message":"Unsupported protocol version"}
뜨네요.
저부분(this.dbname)은 그냥 db이름으로 해주시면 되고요,
user,password 부분은 각각 현재 사용자와 비번으로 해주시면 됩니다.
host,port는 db랑 node를 같은 서버에 까셨다면 그대로 놔두시면 될겁니다.
this.user = 'ahhhhhhhh' => ahhhhhhh부분을 db 사용자명으로,
this.password = 'animalcrossinghagoshipeunde' => animalcrossin어쩌고 그부분을 db 비번으로,
this.dbname = 'switchgaeopdda_ahhhhhhhh' => switchga어쩌고 하는 부분을 그누보드 db로 바꿔주시면 됩니다.
node server.js
Mysql: Successfully connected.

127.0.0.1/chat
화면은 정상적으로 나오는데
글을입력후 우측 동그라미 버튼 누르면 무반응
버튼이 아무런 반응을 안해요
이미 포트 열었다고 말씀 드렸잖어요 ㅠ

혹시 mysql 소켓을 사용중인데 3306포트를 써서 그런건 아닐까요

왜안되는건지 정말 답답합니다
mysql은 제대로 된거 같구요,
그 혹시 동그라미버튼 누르면 개발자도구(f12) 에 뭐 뜨는거 있을건데 그거 캡처해서 보내주실수 있나요?
*** 개인정보보호를 위한 이메일주소 노출방지 ***
혼자 해결 보려고 했지만 안되서 여쭈어 봅니다 ㅠ...

우선 1121 포트 열어놓은 상태이고

클라우드 서버로 세팅 했습니다.

위에 댓글들 참고해서 다했는데 마지막에 여기서 막혔네요....

어떻게 해야될까요 부탁드립니다.
우와;; 프로그램 아예 싹 갈아 엎어 다시 만드셨나보네요;;; 전에건 적용이 어려워 힘들었는데... 이번에 올려주신걸로 잘 살펴보고 적용해보겠습니다. 좋은 자료 올려주셔서 감사합니다
꽤 오랫동안 안건드렸었는데 오랜만에 다시 열어보니까 너무 더러워서(?) 아예 싹 갈아엎고 다시 만들었습니다 ㅋㅋㅋ
개발자님 질문 있습니다! 제 환경이 카페24 웹호스트라서 웹서버, node서버 나눠서 node.js를 실행하고 싶은데요. config.js 중 hostname 변수를 node서버 연결 호스트랑 어떤 내용을 수정하면 되나요?
https://localhost:1121/socket.io/?mb_id=admin&EIO=4&transport=polling&t=NkakEKo&sid=IGNG-GWE7pE639o1AAAC
의 결과값이
{"code":3,"message":"Bad request"}
로 리턴됩니다. 어느부분을 손봐야 할까요?
채팅창에 입력한 데이터는 db에 저장되고 있습니다.
banlist 테이블 만드는 쿼리 돌리니

`ba_id` int not null auto_increment primary key,
`ba_mb_id` varchar(1024) not null unique key,
`ba_reason` text default null )default charset=utf8mb4 engine=InnoDB
Error Code: 1071. Specified key was too long; max key length is 3072 bytes

'ba_mb_id' 유니크 키 길이 오류가 발생해서 varchar(768)로 변경하니 테이블 생성은 됐는데요

막상 노드 실행을 하면 'Mysql: Successfully connected.' 이 메시지가 나오지 않고 무한 대기입니다ㅠ 방법이 있나요?
데모사이트 연결시 와 같은 에러가 나는데 수정 되었건 가요?
[채팅서버 연결이 실패하였습니다. ]
라는 에러가 납니다.
멋진 제품 아직 살아 있다면 도와 주세요

현 시점에 위 파일 그대로 성공 했습니다.

centos 7.x

apache

 

추가로 한작업

1. 1121 포트 열렸는지 확인 후 열어주기

2. index.php에서 js, css 경로 안맞아서 절대경로로 적어줌.

 

햇갈릴 수 있는 지점

ssl 사용시 경로 적을 때 아래에서 () 괄호 빼야 함.

cert:'(fullchain 파일 경로)',

key: '(private key 파일 경로)'

 

서버 접속에 실패 했다고 나오는 경우

node server.js 실행이 제대로 안되어 있으니 에러 난거였습니다.

일반 계정에서 실행 정상적으로 되니 문제 없이 동작 했습니다.

와우 좋긴 한데 초보자는 음두도 못네겠습니다

누가 제작해주실분은 없겠지요 물론 뎃가는 지불해야죠 

수고 했습니다. 

현재 접속자 - 잘 쓰시오

        this.socket.on('connected_users',function(data){
            //console.log(data['list'].length);
            alert(data['list'].length);
       });

전체 503
그누보드5 플러그인 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT