티스토리 뷰

PHP/Codeigniter

php - nodejs을 이용한 채팅기능 구현 (5) 전체적인 소스

realizers 2021. 1. 28. 17:40
728x90
반응형

클라이언트측

 

1.​ index.html

 
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>채팅</title>
      <link rel="stylesheet" href="../css/index.css">
      <script src="../js/socket.io.js"></script>
      <script src="../js/index.js"></script>
    </head>
    <body>
        <div class="col-sm-3 col-sm-offset-4 frame">
            <ul id="chat"></ul>
            <div>
                <div class="msj-rta macro">
                    <div class="text text-r" style="background:whitesmoke !important">
                        <input class="mytext" id="message" placeholder="메시지를 입력해주세요.."/>
                    </div>
                </div>
                <div style="padding:10px;">
                    <span class="glyphicon glyphicon-share-alt" onclick="message_send()"></span>
                </div>
            </div>
        </div>
    </body>
</html>
 cs
 
 
 
2.​ index.css

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/* 채팅 영역 */
#chat {
  height: 90%;
  width: 100%;
  overflow-y: auto;
}
/*  asdasdasdd */
.mytext{
    border:0;padding:10px;background:whitesmoke;
}
.text{
    width:75%;display:flex;flex-direction:column;
}
.text > p:first-of-type{
    width:100%;margin-top:0;margin-bottom:auto;line-height: 13px;font-size: 12px;
}
.text > p:last-of-type{
    width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto;
}
.text-l{
    float:left;padding-right:10px;
}
.text-r{
    float:right;padding-left:10px;
}
.avatar{
    display:flex;
    justify-content:center;
    align-items:center;
    width:25%;
    float:left;
    padding-right:10px;
}
.macro{
    margin-top:5px;width:85%;border-radius:5px;padding:5px;display:flex;
}
.msj-rta{
    float:right;background:whitesmoke;
}
.msj{
    float:left;background:white;
}
.frame{
    background:#e0e0de;
    height:450px;
    overflow:hidden;
    padding:0;
}
.frame > div:last-of-type{
    position:absolute;bottom:0;width:100%;display:flex;
}
body > div > div > div:nth-child(2) > span{
    background: whitesmoke;padding: 10px;font-size: 21px;border-radius: 50%;
}
body > div > div > div.msj-rta.macro{
    margin:auto;margin-left:1%;
}
ul {
    width:100%;
    list-style-type: none;
    padding:18px;
    position:absolute;
    bottom:47px;
    display:flex;
    flex-direction: column;
    top:0;
    overflow-y:scroll;
}
.msj:before{
    width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:-14px;
    position:relative;
    border-style: solid;
    border-width: 0 13px 13px 0;
    border-color: transparent #ffffff transparent transparent;
}
.msj-rta:after{
    width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:14px;
    position:relative;
    border-style: solid;
    border-width: 13px 13px 0 0;
    border-color: whitesmoke transparent transparent transparent;
}
input:focus{
    outline: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #d4d4d4;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #d4d4d4;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #d4d4d4;
}
:-moz-placeholder { /* Firefox 18- */
    color: #d4d4d4;
}
 
 
 cs
 

 

 
2.​ index.js
 
var socket = io()
 
/* 접속 되었을 때 실행 */
socket.on('connect', function() {
  /* 서버에 유저가 접속했다고 알림 */
  socket.emit('NewUser');
});
 
/* User의 메시지를 계속 업테이드 해줌 */
socket.on('User_Message_Update', function(data) {
  var chat      = document.getElementById('chat');
      chat.innerHTML = '';
 
  for (var loop = 0; loop < data.result.length; loop++) {
    var contents = document.createElement('div');
 
    if(data.result[loop].is_admin == 'N'){
      contents.innerHTML += '<li style="width:100%">' +
                              '<div class="msj macro">' +
                                '<div class="avatar"><img class="img-circle" style="width:100%;" src="https://ptetutorials.com/images/user-profile.png" /></div>' +
                                  '<div class="text text-l">' +
                                  '<p>'+ data.result[loop].message +'</p>' +
                                  '<p><small>'+data.result[loop].write_date+'</small></p>' +
                              '</div>' +
                            '</div>' +
                          '</li>';
    }else{
      contents.innerHTML += '<li style="width:100%;">' +
                             '<div class="msj-rta macro">' +
                               '<div class="text text-r">' +
                                   '<p>'+data.result[loop].message+'</p>' +
                                   '<p><small>'+data.result[loop].write_date+'</small></p>' +
                               '</div>' +
                            '<div class="avatar" style="padding:0px 0px 0px 10px !important"><img class="img-circle" style="width:100%;" src="https://ptetutorials.com/images/user-profile.png" /></div>' +
                          '</li>';
 
    }
    chat.appendChild(contents);
    chat.scrollTop = chat.scrollHeight;
  }
 
})
 
/* 메시지 전송 함수 */
function message_send() {
  var mb_id   = getUrlParams().mb_id;
  var mb_name = decodeURI(getUrlParams().mb_name);
  var message = document.getElementById('message').value;
 
  if(message == ''){
    alert('답변을 입력해주세요.');
    return false;
  }
 
  document.getElementById('message').value = '';
 
  // 서버로 user_Message_Send 이벤트 전달 + 데이터와 함께
  socket.emit('User_Message_Send', {type: 'message', message: message, mb_id:mb_id, mb_name:mb_name});
}
 
function getUrlParams() {
    var params = {};
    window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) { params[key] = value; });
    return params;
}
 cs
 
 
관리자 측
 
1.​ admin.html
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/admin.css">
    <script src="/js/socket.io.js"></script>
    <script src="/js/admin.js"></script>
  </head>
  <body>
    <div class="messaging">
      <div class="inbox_msg">
        <div class="inbox_people">
          <div class="headind_srch">
            <div class="recent_heading">
              <h4>Recent</h4>
            </div>
            <div class="srch_bar">
              <div class="stylish-input-group">
                <input type="text" class="search-bar"  placeholder="Search" >
                </div>
            </div>
          </div>
          <div class="inbox_chat scroll" id="User-info">
             <!-- 유저들 Info -->
          </div>
        </div>
        <div class="mesgs">
          <div class="msg_history" id="Message_history">
          <!-- 대화내용 -->
          </div>
          <div class="type_msg">
            <div class="input_msg_write">
              <input type="text" id="write_msg" placeholder="메시지 입력" data-mb_id=""/>
              <button class="msg_send_btn" type="button" onclick="Manager_Message_Send()"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
 cs
 
 
2.​ admin.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
/*---------chat window---------------*/
.inbox_people {
    background: #fff;
    float: left;
    overflow: hidden;
    width: 30%;
    border-right: 1px solid #ddd;
}
.inbox_msg {
    border: 1px solid #ddd;
    clear: both;
    overflow: hidden;
}
.top_spac {
    margin: 20px 0 0;
}
.recent_heading {
    float: left;
    width: 40%;
}
.srch_bar {
    display: inline-block;
    text-align: right;
    width: 60%;
    padding:
}
.headind_srch {
    padding: 10px 29px 10px 20px;
    overflow: hidden;
    border-bottom: 1px solid #c4c4c4;
}
.recent_heading h4 {
    color: #0465ac;
    font-size: 16px;
    margin: auto;
    line-height: 29px;
}
.srch_bar input {
    outline: none;
    border: 1px solid #cdcdcd;
    border-width: 0 0 1px 0;
    width: 80%;
    padding: 2px 0 4px 6px;
    background: none;
}
.srch_bar .input-group-addon button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    padding: 0;
    color: #707070;
    font-size: 18px;
}
.srch_bar .input-group-addon {
    margin: 0 0 0 -27px;
}
.chat_ib h5 {
    font-size: 15px;
    color: #464646;
    margin: 0 0 8px 0;
}
.chat_ib h5 span {
    font-size: 13px;
    float: right;
}
.chat_ib p {
    font-size: 12px;
    color: #989898;
    margin: auto;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat_img {
    float: left;
    width: 11%;
}
.chat_img img {
    width: 100%
}
.chat_ib {
    float: left;
    padding: 0 0 0 15px;
    width: 88%;
}
.chat_people {
    overflow: hidden;
    clear: both;
}
/* 알림 디자인 */
.alarm-button {
  float: right;
  font-size: 10px;
  width: 25px;
  height: 25px;
  background: red;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.User {
    border-bottom: 1px solid #ddd;
    margin: 0;
    padding: 18px 16px 10px;
}
.inbox_chat {
    height: 550px;
    overflow-y: scroll;
}
.active_chat {
    background: #e8f6ff;
}
.incoming_msg_img {
    display: inline-block;
    width: 6%;
}
.incoming_msg_img img {
    width: 100%;
}
.received_msg {
    display: inline-block;
    padding: 0 0 0 10px;
    vertical-align: top;
    width: 92%;
}
.received_withd_msg p {
    background: #ebebeb none repeat scroll 0 0;
    border-radius: 0 15px 15px 15px;
    color: #646464;
    font-size: 14px;
    margin: 0;
    padding: 5px 10px 5px 12px;
    width: 100%;
}
.time_date {
    color: #747474;
    display: block;
    font-size: 12px;
    margin: 8px 0 0;
}
.received_withd_msg {
    width: 57%;
}
.mesgs{
    float: left;
    padding: 30px 15px 0 25px;
    width:70%;
}
.sent_msg p {
    background:#0465ac;
    border-radius: 12px 15px 15px 0;
    font-size: 14px;
    margin: 0;
    color: #fff;
    padding: 5px 10px 5px 12px;
    width: 100%;
}
.outgoing_msg {
    overflow: hidden;
    margin: 26px 0 26px;
}
.sent_msg {
    float: right;
    width: 46%;
}
.input_msg_write input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #4c4c4c;
    font-size: 15px;
    min-height: 48px;
    width: 100%;
    outline:none;
}
.type_msg {
    border-top: 1px solid #c4c4c4;
    position: relative;
}
.msg_send_btn {
    background: #05728f none repeat scroll 0 0;
    border:none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    height: 33px;
    position: absolute;
    right: 0;
    top: 11px;
    width: 33px;
}
.messaging {
    padding: 0 0 50px 0;
}
.msg_history {
    height: 516px;
    overflow-y: auto;
}
 cs
 
 
 
 
3.​ admin.js
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
var socket = io()
 
/* 접속 되었을 때 실행 */
socket.on('connect', function() {
  /* 서버에 유저를 가져옴 알림 */
  socket.emit('Manager_GetUsers');
});
 
socket.on('Manager_User_Info_Reset', function(data) {
  var user_info = document.getElementById('User-info');
      user_info.innerHTML = '';
 
  for (var loop = 0; loop < data.result.length; loop++) {
    var content   = document.createElement('div');
    var new_alarm = "";
 
    if(data.result[loop].is_read == 'N'){
      new_alarm += '<span class="alarm-button">new</span>';
    }
 
    content.innerHTML += '<div class=User data-mb_id= '+ data.result[loop].mb_id +' >' +
                           '<div class=chat_people>' +
                                  '<div class=chat_img><img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>' +
                                  '<div class=chat_ib>' +
                                    '<h5>'+ data.result[loop].mb_name +'</h5>' +
                                        new_alarm +
                                    '<p>Test, which is a new approach to have all solutions</p>' +
                                  '</div>' +
                            '</div>' +
                          '</div>' ;
    user_info.appendChild(content);
 
    var elements = document.getElementsByClassName("User");
    
    //  class를 이용하여 각 유저들 클릭
    for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener('click', selectRoom, false);
    }
  }
});
 
  var selectRoom = function() {
    var user = document.getElementsByClassName('User');
 
    for (var loop = 0; loop < user.length; loop++) {
       user[loop].classList.remove("active_chat");
    }
 
    this.classList.add('active_chat');
 
    var mb_id     = this.getAttribute("data-mb_id");
    var write_msg = document.getElementById('write_msg');
    write_msg.dataset.mb_id = mb_id;
 
    socket.emit('joinRoom', mb_id); // 각 유저들 클릭 시 server.js 
  };
 
socket.on('Manager_User_Message_Update', function(data) {
  var message_history = document.getElementById('Message_history');
      message_history.innerHTML = '';
 
  var content   = document.createElement('div');
 
  for (var loop = 0; loop < data.result.length; loop++) {
 
    if(data.result[loop].is_admin == 'Y'){
      // 관리자 답장 시
      content.innerHTML += '<div class=outgoing_msg>' +
                              '<div class=sent_msg>' +
                                '<div class=received_withd_msg>' +
                                  '<p>'+ data.result[loop].message +'</p>' +
                                  '<span class=time_date>'+ data.result[loop].write_date +'</span>' +
                              '</div>' +
                            '</div>' ;
    }else{
      // 사용자 답장 시 
      content.innerHTML += '<div class=incoming_msg>' +
                              '<div class=incoming_msg_img><img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"></div>' +
                              '<div class=received_msg>' +
                                '<div class=received_withd_msg>' +
                                  '<p>'+ data.result[loop].message +'</p>' +
                                  '<span class=time_date>'+ data.result[loop].write_date +'</span>' +
                                '</div>' +
                              '</div>' +
                            '</div>' ;
    }
 
    message_history.appendChild(content);
 
    message_history.scrollTop = message_history.scrollHeight;
  }
})
 
 
function Manager_Message_Send() {
  var message = document.getElementById('write_msg').value;
 
  if(message == ''){
    alert('답변을 입력해주세요.');
    return false;
  }
  document.getElementById('write_msg').value = '';
 
  var mb_id = document.getElementById('write_msg').getAttribute("data-mb_id");
 
  // 서버로 Manager_Message_Send 이벤트 전달 + 데이터와 함께
  socket.emit('Manager_Message_Send', {message: message, user_id:mb_id});
}
 cs
 
 
 
 
서버측
server.js
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
const express        = require('express'); //설치한 express 모듈 불러오기
const socket         = require('socket.io'); //설치한 socket.io 모듈 불러오기
const http           = require('http'); //Node.js 기본 내장 모듈 불러오기
const fs             = require('fs'); //Node.js 기본 내장 모듈 불러오기
const app            = express();    // express 객체 생성
const server         = http.createServer(app); //express http 서버 생성
const io             = socket(server); //생성된 서버를 socket.io에 바인딩
var mb_id            = ""; // php서버에서 사용자 보내주는 파라미터 - ID값
var mb_name          = ""; // php서버에서 사용자 보내주는 파라미터 - 이름값
var admin_mb_id      = ""; // php서버에서 관리자 보내주는 파라미터 - ID값
var admin_mb_name    = ""; // php서버에서 관리자 보내주는 파라미터 - 이름값
var ip_address       = ""; // IP 주소
 
const mysql      = require('mysql');
const connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : 'Dkdldb1256!',
  database : 'kdg'
});
 
var chattingRoom = new Array();  // 관리자가 유저의 방에 입장
 
/* css, js 파일 적용  */
app.use('/css', express.static('./static/css'));
app.use('/js', express.static('./static/js'));
 
/* 사용자측면 / 경로에 접속하면 실행 됨 */
app.get('/', function(request, response) {
  mb_id   = request.query.mb_id;
  mb_name = request.query.mb_name;
 
  fs.readFile('./static/index.html', function(err, data) {
    if(err) {
      response.send('에러')
    } else {
      response.writeHead(200, {'Content-Type':'text/html'})
      response.write(data)
      response.end()
    }
  })
});
 
/* 관리자측면 / 경로에 접속하면 실행 됨 */
app.get('/admin/chatting/index', function(request, response) {
 
  admin_mb_id = request.query.mb_id;
  admin_mb_name = request.query.mb_name;
 
  fs.readFile('./static/admin.html', function(err, data) {
    if(err) {
      response.send('에러')
    } else {
      response.writeHead(200, {'Content-Type':'text/html'})
      response.write(data)
      response.end()
    }
  })
});
 
 
io.sockets.on('connection', function(socket) {
 
  // 아이피 주소
  require('dns').lookup(require('os').hostname(), function (err, add, fam) {
    ip_address = add;
  })
 
  // 사용자 입장
  socket.on('NewUser', function() {
    socket.name = mb_name; // 소켓에 이름 저장해두기
 
    socket.join(mb_id); // User 입장시 Room에 들여보냄
 
    if(mb_id != ""){
      // 사용자 입장시 채팅방에 사용자를 작성
      connection.query('SELECT * FROM chatting_room WHERE mb_id = ?', mb_id ,function(err,result) {
          if(result.length == 0){
              var sql = 'INSERT INTO chatting_room(mb_id, mb_name) VALUES(?, ?)';
              var params = [mb_id, mb_name];
              connection.query(sql,params,function(err,rows,fields) {
                if(err){
                  console.log(err);
                }
              });
          }
      });
 
      // 사용자 입장시 자신의 채팅대화 가져오기
      connection.query('SELECT * FROM chatting WHERE mb_id = ?', mb_id ,function(err,result) {
        io.sockets.in(mb_id).emit('User_Message_Update', {result: result});
      });
    }
  });
 
 
  /* 사용자가 전송한 메시지 받기 */
  socket.on('User_Message_Send', function(data) {
 
    var datetime = new Date();
    var sql      = 'INSERT INTO chatting(mb_id, mb_name, message, is_admin, write_date, write_ip)VALUES(?, ?, ?, ?, ?, ?)';
    var params   = [data.mb_id, data.mb_name, data.message, 'N', datetime, ip_address];
 
    connection.query(sql,params,function(err,rows,fields) {
      if(err){
        console.log(err);
      }else{
 
        // 새로운 글이 작성되면 user-info에 읽지 않음 표시로 업테이트
        var sql    = "UPDATE chatting_room SET is_read = 'N' WHERE mb_id = ?";
        var params = [data.mb_id];
        connection.query(sql, params, function(err, result, fields) {});
 
         connection.query(sql, params, function(err, result, fields) {
          if(err){
            console.log(err);
          } else {
 
            //자신의 글을 가져옴
            connection.query('SELECT * FROM chatting WHERE mb_id = ? order by write_date ASC', data.mb_id ,function(err,result) {
              io.sockets.in(data.mb_id).emit('User_Message_Update', {result: result}); // Room에 입장한 특정 클라이언트에게 메시지 보냄
            });
 
            if(chattingRoom[0] != undefined){
              // 관리자랑 1:1 소통중이라면 해당 사용자를 읽음 표시로 하고, 1:1사용자의 대화내용을 관리자에게 계속 update함
              connection.query("UPDATE chatting_room SET is_read = 'Y' WHERE mb_id = ?", chattingRoom[0], function(err, result) {
                connection.query('SELECT * FROM chatting_room' ,function(err,result) {
                  io.sockets.emit('Manager_User_Info_Reset',
                    {
                      result : result
                    }
                  );
                });
                connection.query('SELECT * FROM chatting WHERE mb_id = ? order by write_date ASC', chattingRoom[0] ,function(err,result) {
                  io.sockets.emit('Manager_User_Message_Update',
                    {
                      result : result
                    }
                  );
                });
              });
            }else{
              // 관리자랑 1:1 소통중은 아니지만 관리자 페이지에서도 새로운 메시지가 왔다는걸 확인 할 수 있도록 초기화 시켜줌
              connection.query('SELECT * FROM chatting_room' ,function(err,result) {
                io.sockets.emit('Manager_User_Info_Reset',
                  {
                    result : result
                  }
                );
              });
            }
          }
        });
      }
    });
  });
 
 
 
  /* 관리자페이지 유저 확인 */
  socket.on('Manager_GetUsers', function() {
     connection.query('SELECT * FROM chatting_room' ,function(err,result) {
       io.sockets.emit('Manager_User_Info_Reset',
         {
           result : result
         }
       );
     });
   });
 
 
 
  /* 관리자페이지 유저들의 대화 확인 */
  socket.on('joinRoom', function(data) {
    connection.query("UPDATE chatting_room SET is_read = 'Y' WHERE mb_id = ?", data, function(err, result) {
      if(err){
        console.log(err);
      } else {
        if(chattingRoom.length < 1){
          chattingRoom.push(data); //신규 방 생성
        }else{
          chattingRoom = new Array;
          chattingRoom.push(data); //신규 방 생성
        }
 
        connection.query('SELECT * FROM chatting_room' ,function(err,result) {
          io.sockets.emit('Manager_User_Info_Reset',
            {
              result : result
            }
          );
        });
 
        connection.query('SELECT * FROM chatting WHERE mb_id = ? order by write_date ASC', data ,function(err,result) {
          io.sockets.emit('Manager_User_Message_Update',
            {
              result : result
            }
          );
        });
      }
    });
  });
 
 
 
  /* 관리자가 전송한 메시지 받기 */
  socket.on('Manager_Message_Send', function(data) {
 
    var datetime = new Date();
    var sql      = 'INSERT INTO chatting(mb_id, reply_mb_id, mb_name, message, is_admin, write_date, write_ip)VALUES(?, ?, ?, ?, ?, ?, ?)';
    var params   = [data.user_id, admin_mb_id, admin_mb_name, data.message, 'Y', datetime, ip_address];
 
    connection.query(sql,params,function(err,rows,fields) {
      if(err){
        console.log(err);
      }else{
        var sql    = "UPDATE chatting_room SET is_read = 'Y' WHERE mb_id = ?";
        var params = [data.user_id];
        connection.query(sql, params, function(err, result, fields) {});
 
         connection.query(sql, params, function(err, result, fields) {
          if(err){
            console.log(err);
          } else {
 
            // 관리자 글 작성시 User-Info 업데이트
            connection.query('SELECT * FROM chatting_room' ,function(err,result) {
              io.sockets.emit('Manager_User_Info_Reset',
                {
                  result : result
                }
              );
            });
 
            // 관리자 글 작성시 유저와의 대화 업데이트
            connection.query('SELECT * FROM chatting WHERE mb_id = ? order by write_date ASC', data.user_id ,function(err,result) {
              io.sockets.emit('Manager_User_Message_Update',
                {
                  result : result
                }
              );
            });
            //관리자 답장시 사용자도 바로 확인할 수 있도록 특정 클라이언트 호출
            connection.query('SELECT * FROM chatting WHERE mb_id = ? order by write_date ASC', data.user_id ,function(err,result) {
              io.sockets.in(data.user_id).emit('User_Message_Update', {result: result}); // Room에 입장한 특정 클라이언트에게 메시지 보냄
            });
          }
        });
      }
    });
  });
 
});
 
 
 
/* 서버를 8080 포트로 listen */
server.listen(8080, function() {
  console.log('서버 실행 중..')
});
 
 
 cs
 
 
 
 여기서 주의할 점은 nodejs 7버전 이상부터 socket를 이용할 수 있다
  cafe24 이용 시 기본이 6버전으로 설치가 되니 업그레이드를 해주어야한다.
728x90
반응형

'PHP > Codeigniter' 카테고리의 다른 글

PHP - Paging  (0) 2021.01.28
php - dropzone을 이용한 멀티 업로드  (0) 2021.01.28
php - nodejs을 이용한 채팅기능 구현 (4)  (0) 2021.01.28
php - nodejs을 이용한 채팅기능 구현 (3)  (0) 2021.01.28
php - nodejs을 이용한 채팅기능 구현 (2)  (0) 2021.01.28