2017년 8월 10일 목요일

mqtt이용 채팅 웹 구현


먼저 라이브러리를 넣자;
javascripts 폴더안에 jquery랑 mqtt 라이브러리 넣어주자

mqtt다운 받는 링크



project1/view/ mqtt1.ejs

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

<!DOCTYPE html>
<html>
<head>
<title>mqtt</title>
 <script src="/javascripts/jquery.js" type="text/javascript"></script>
 <script src="/javascripts/mqttws31.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var client = new Paho.MQTT.Client('211.110.165.201',1884,'jdh1');
    client.connect({onSuccess:Conn});//연결성공
    client.onMessageArrived = MsgArriv ; //메세지
    client.onConnectionLost = onConLost; //연결종료
    function Conn(){ //연결되었을때
      client.subscribe('<%= topic %>'+'/#');
      //client.subscribe('class603/#'); //구독자 등록      
    };
    function MsgArriv(message){
      console.log(message);
      recvMsg(message);
    };
    //연결이 끝어지면
    function onConLost(responseObject){
      alert('disconnect'); //서버가 끊기면
    };
    function sendMessage(t, m){
      message = new Paho.MQTT.Message(m);
      message.destinationName = t;
      client.send(message);
    }
    $(document).ready(function(){
      recvMsg = function(msg){
        $('#div_out').html(msg.payloadString);
      };
      $('#txt_msg').keyup(function(event){
        if(event.which == 13){
          var m = $('#txt_msg').val();
          sendMessage('<%= topic %>'+'/jdh', m);
          //sendMessage('class603/jdh', m);
        }
      });
  });
 </script>
</head>
<body>
  <input type="text"  id="txt_msg"  />
  <div id="div_out"></div>
 </body>
</html>
cs


room.ejs

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
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1></h1>
    
    <table width="200px" border="1px">
      <tr>
        <th>방이름</th>
        <th>비고</th>
      </tr><br>
      <for(var i=0; i<list.length; i++){ %>
        <tr>
          <td><%= list[i].topic %></td>
          <td><a href = "mqtt1?t=<%= list[i].topic %>">참여</a></td>
        </tr>
      <% } %>
    </table>
  </body>
</html>
cs


member.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
router.get('/room'function(req, res, next) {
   var sql = "SELECT * FROM chat_room";
  dbconn.query(sql,function(err,rows,fileds){
    if(!err){
      if(rows.length > 0){
        //room.ejs로 list정보 전달
        res.render('room',{'list':rows});
      }
    }
  });  
});
router.get('/mqtt1'function(req, res, next) {
  var t = req.query.t; //req.body.(name값)
  
res.render('mqtt1',{topic:t});
});
cs


실행화면





댓글 없음:

댓글 쓰기