Node.js 실시간 채팅(관리되지 않음) 정보
Node.js 실시간 채팅(관리되지 않음)관련링크
첨부파일
본문
주의사항
- 현재 이 플러그인은 관리되지 않습니다.
- 익스플로러에서는 정상 작동을 보장하지 않습니다. 다른 브라우저를 사용해주세요.
댓글의 경우 답변이 늦거나 오지 않을 수 있습니다.
(이메일 필요 시 *** 개인정보보호를 위한 이메일주소 노출방지 *** 으로)
데모 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
댓글 전체
공개해 주셔서 감사합니다.
단체 채팅 기능인가요? 1:1 채팅 기능인가요?
autoset 찾아보니 웹서버를 세팅해주는 프로그램인거 같던데, 아마 node.js는 따로 까셔야 될거 같습니다.
+ 링크도 있습니다
카페24에 웹호스팅중인데 도무지 어떻게 설치하는지 모르겠네요.
6번이 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 폴더에서 추가 모듈을 설치하는 명령어입니다.
... 'ws://'+location.hostname+':1121/ ...(1라인쯤에 있습니다)
에서 '+location.hostname+' 부분을 nodejs 호스팅서버 도메인주소(혹은 ip주소)로 수정하시고 접속하시면 될겁니다(node폴더의 config.js에서 DB설정을 자신에게 맞게 바꿔주세요)
혹시 차단기능이라지 게시글지우기 기능이있나요?
기대하겠습니다!!
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';
}();
}
dbname은 그누보드DB이름을 적는겁니다. host는 포트없이 ip나 도메인만 적으면 됩니다.
server폴더에 있는파일을 업로드하였고 웹호스팅에 그누보드와 chat 폴더를 업로드하였습니다.
node호스팅의 db접속은 웹호스팅에 해두었고, 채팅폴더에있는 common.js에
var socket = io.connect('ws://"+노드서버도메인+":1121/index.goza?mb_id='+mb_id);
처럼 해두었는데 안되네요..
저기 1121은 어떤포트인지 socket포트라면, socket 포트는 어디서 보나요..
var socket = io.connect('ws://노드서버도메인:socket포트/...
와 같이 하시면 됩니다.
이렇게 나오면서 계속 서버연결이 실패했다고 나오는데.. 어디를 손봐야되는거죠 ㅜㅜ
혹시몰라서 1121 포트도 열고 다했는데 안되네요.. ㅜㅜ
node server.js명령어후
Server is running. port: 1121
Mysql: Successfully connected.
이렇게 뜨면 되는거아닌가요?
아니면 그냥 도메인.com/chat 이렇게 접속해야하나요 ㅠㅠ
아직도 해결이안됩니다
쪽지 보내드릴게요!
혹시 apache 쓰십니까?
3일째 삽푸고있는데 도와주세요 ㅜㅜ
2. DB클라이언트로 DB서버에 접속하고 (phpmyadmin 써도됨)그누보드가 설치된 db 선택 후 쿼리(query) 탭에 들어가서 그 내용을 붙여넣습니다.
3. g5_ ,myisam,utf8 부분은 각각 테이블접두사, db엔진(그대로 놔두셔도 되긴합니다),db 문자인코딩으로 수정합니다.
4. 실행합니다.
혹시 개별적으로 연락드릴수 있는 방법은 없나요?
크롬에서는 잘 동작 합니다.
다른 브라우저를 사용해주세요.
IE는 안되네요.
아 그리고 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;}
위와 같이 잡아주니 딱 좋네요.
index.php를 보니
<div class="title_area">실시간 채팅</div>
위와 같이만 표기되어있더라구요.
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의 포트는 외부 노출이 되어야합니다. 즉, 방화벽을 해제해야 합니다.
더 좋은 소스가 나오면 좋은데 ㅜ ㅜ
저도 겨우 적용하는 수준이라 아쉬워요.
/chat들어가서 채팅을쳐도 주소창에 /chat/#만뜨고 아무반응이없고 혹시 몰라 node서버 주소로
아이피주소:1121로 들어가도 스크린에서 아무 로그도 안뜨고 무한로딩에 '아이피주소에서 전송한 데이터가 없습니다.'라고 뜨네요...
1121포트 오픈하셨나요?
Mysql: Successfully connected. 켜지는것 같은데 주소/chat으로 들어가면 node서버가 바로 팅겨버리네요...
아래와 같은 오류가 납니다.
모듈은 모두 설치했는데 혹시 더 설치해야할게 있나요?
우분투 1604 환경이고
nodejs 버전 v12.19.1
npm 버전 6.14.8
입니다.
다른 nodejs 예제는 다 잘실행되는데 이것만 이런 에러가나네요..
/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 명령어를 실행하면 위같이 나오는데 어느부분이 오류인지알수있을까요?
function() 으로 바꾸고, io.set('origins','*:*'); 은 주석처리했습니다. 혹시 오류나시는 분들 참고하세요
쉽게 하는방법이 없을까요 ㅠㅠ
위 오류때문인지 채팅서버에 연결할 수 없다고 뜨네요.
웹에서 위주소로 접속해보면
{"code":5,"message":"Unsupported protocol version"}
뜨네요.
살려주세요 ㅠ
수정작업을 올렸습니다.
그래도 안되는듯 맞게 수정했는지 살펴봐주세요
수정작업을 올렸습니다.
그래도 안되는듯 맞게 수정했는지 살펴봐주세요
수정작업을 올렸습니다.
(2)개 질문답변도 해주셔요
user,password 부분은 각각 현재 사용자와 비번으로 해주시면 됩니다.
host,port는 db랑 node를 같은 서버에 까셨다면 그대로 놔두시면 될겁니다.
해결방안 마련해주세요 ㅠ
this.password = 'animalcrossinghagoshipeunde' => animalcrossin어쩌고 그부분을 db 비번으로,
this.dbname = 'switchgaeopdda_ahhhhhhhh' => switchga어쩌고 하는 부분을 그누보드 db로 바꿔주시면 됩니다.
Mysql: Successfully connected.
127.0.0.1/chat
화면은 정상적으로 나오는데
글을입력후 우측 동그라미 버튼 누르면 무반응
버튼이 아무런 반응을 안해요
혹시 mysql 소켓을 사용중인데 3306포트를 써서 그런건 아닐까요
왜안되는건지 정말 답답합니다
그 혹시 동그라미버튼 누르면 개발자도구(f12) 에 뭐 뜨는거 있을건데 그거 캡처해서 보내주실수 있나요?
*** 개인정보보호를 위한 이메일주소 노출방지 ***
우선 1121 포트 열어놓은 상태이고
클라우드 서버로 세팅 했습니다.
위에 댓글들 참고해서 다했는데 마지막에 여기서 막혔네요....
어떻게 해야될까요 부탁드립니다.
의 결과값이
{"code":3,"message":"Bad request"}
로 리턴됩니다. 어느부분을 손봐야 할까요?
채팅창에 입력한 데이터는 db에 저장되고 있습니다.
잘 작동하네요.
감사합니다.
`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);
});
필요해서 한참 만들고 있었는데 이렇게 다 만들어진 프로그램이 있었군요^^
복받으실것 같아요~~
현 NODE.JS 채팅 업그레이드 버전 설치/수정 해 드립니다.
텔레그램: @sky1014
감사합니다~~~!!!
감사합니다!!