채팅을 만들었다.

마스터욱 1 176 0 0 2017-01-08 01:23:45

채팅을 만들었다기보다는 예전에 만들어놓은걸 사이트로 이식했다.

전체채팅으로 만들어서 매우 심플하다.

테이블도 1개 밖에 없다.

심플 미니 채팅이라고 할수 있겠다.

웹소켓을 사용하여 만들수도 있겠지만, 그렇게 하면 소켓서버도 별도로 있어야 하고, 이런 작은 채팅사이즈는 굳이 그렇게 거창하게 만들 필요도 없기 때문에 정말 심플채팅 용으로 만들었다.

클라이언트 딴 소스를 공개한다.

만일 테이블 스키마랑 백엔드 소스를 알고 싶다면 별도로 요청해 주신다면 알려드릴게요.

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
<script type="text/javascript">
    var chating = new function(){
        var msgIng = false;
        var startLoading = true;
        var already_idx = new Array();
        this.send = function(){
            var content = $("#content").val();
            if(content.trim() == "" || msgIng == true){
                return;
            }
 
            $("#content").val("메세지 전송중입니다...");
            $("#content").attr("disabled", true);
            msgIng = true;
 
            $.get("chating_send.php",{content : content},
                function(res){
                    try{
                        if(res.result == true){
                            // 메세지 전송 성공
                            msgIng = false;
                            $("#content").attr("disabled", false);
                            $("#content").val("");
                            $("#content").focus();
                        }
                        else {
                            alert(res.msg);
                        }
                    }catch(e){
                        alert("Error!" + e);
                    }
                },"json"
            );
        }
 
        this.recv = function(){
            $.post("chating_recv.php",{already_idx : already_idx.join(",")},
                function(res){
                    try{
                        if(res.result == true){
                            var data = res.data;
                            var msgUse = false;
                            for ( var i in data ){
                                var content = data[i].content;
                                var msg_key = "msg_" + data[i].idx;
                                if ( document.getElementById(msg_key) == undefined ){
                                    var user = null;
                                    if ( data[i]['sess_id'] == "<?=substr(SESSION_ID, 0, SESSION_ID_SIZE)?>" ){
                                        user = "나의대화";
                                    }
                                    else {
                                        user = data[i]['sess_id'] + " 님의 대화";
                                    }
 
                                    $("#chating_box").append("<div id='" + msg_key + "' style='margin:5px 0px;'><div style='float:left;'>[ "+user+" ] <span style='color:blue;'>" + content + "</span></div><div style='float:right'>"+data[i].reg_date+"</div><div style='clear:both;'></div>");
 
                                    already_idx.push(data[i].idx);
                                    msgUse = true;
                                }
                            }
 
                            if(msgUse == true || startLoading == true){
                                $("#chating_box").scrollTop($("#chating_box")[0].scrollHeight);
                            }
 
                            if(startLoading == true){
                                startLoading = false;
                                $("#chating_box").css("background-image", "");
                            }
 
                            chating.recv_start();
                        }
                        else {
                            alert(res.msg);
                        }
                    }catch(e){
                        alert("Error!" + e);
                    }
                },"json"
            );
        }
 
        this.recv_start = function(){
            setTimeout(this.recv, 1000);
        }
 
        this.get_sess_list = function(){
            $.get("chating_session_list.php",{},
                function(res){
                    try{
                        if(res.result == true){
                            $("#sess_list").html("");
                            var sess_list = res.sess_list;
                            var html = "<h4 style='text-align:center;'>세션 리스트</h4>";
                            for(i in sess_list){
                                if ( sess_list[i] == "<?=substr(SESSION_ID, 0, SESSION_ID_SIZE)?>" ) {
                                    html += "<div>" + sess_list[i] + " [<span style='color:red;'>본인</span>]</div>";
                                }
                                else{
                                    html += "<div>"+sess_list[i]+"</div>";
                                }
                            }
                            $("#sess_list").append(html);
                            console.log("세션갱신ok");
                            chating.get_sess_start();
                        }
                        else {
                            alert(res.msg);
                        }
                    }catch(e){
                        alert("Error!" + e);
                    }
                },"json"
            );
        }
 
        this.get_sess_start = function(){
            setTimeout(this.get_sess_list, 1000 * 60);
        }
    }
 
    $(document).ready(function(){
        chating.recv_start();
        chating.get_sess_list();
        $("#content").focus();
    });
 
</script>
<style type="text/css">
    @media all and (max-width:767px){
        /* 모바일 CSS 작성 */
        #chating_box { height:300px; }
    }
    @media all and (min-width:768px) and (max-width:1024px){
        /* 태블릿 및 노트북 CSS 작성 */
        #chating_box { height:500px; }
    }
     
    @media all and (min-width:1025px){
        /* 데스크탑 CSS 작성 */
        #chating_box { height:500px; }
    }
</style>
 
<div class="row" style="border:1px solid #e1e1e1;">
    <div class="col-md-10" id="chating_box" style="overflow-y:scroll;"></div>
    <div class="col-md-2 hidden-xs hidden-sm hidden-md" id="sess_list"></div>
    <div>
        <div class="col-md-10" style="padding:0px;">
            <input type="text" id="content" placeholder="대화내용을 입력해주세요." class="form-control" onkeypress="if(event.keyCode==13){chating.send();}" />
        </div>
        <div class="col-md-2" style="padding:0px;">
            <input type="button" style="width:100%;" class="btn btn-success" value="전송" onclick="chating.send();" />
        </div>
    </div>
</div>
Colored by Color Scripter
cs