관리자 1 47 0 0

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

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

테이블도 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>
cs

 

 


 

Comments [1]

비회원
스키마와 백엔드 소스 원합니다!!
me-rong3@daum.net 으로 알려주시면 감사할게요~

제목 글쓴이
사무실이 추워졌닷! 마스터욱
클라우드 플레어(Cloudflare)를 우회하는 크롤링(crawling) 댓글 1 마스터욱
트롤박스 개발자셨군요! 댓글 1 비회원
tradingview 공부...   비회원
    약간의 설명을 해드리도록 하겠습니다. 댓글 1 마스터욱
리액트(react)로 웹(web) 을 개발해본 소감 마스터욱
오랜만에 다시 서버프로그래밍의 세계로~ 마스터욱
두번째 구글 애드센스 수익금 도착 마스터욱
nodejs upbit 자동매매 개발일기 마스터욱
욱님, 생일 축하드려요! 마스터욱
저녁이라는 감성과 하고싶은일을 하는 삶의 행복 마스터욱
카카오페이카드 사용내역 리스트 pdf 로 뽑는 방법(종합소득세 제출용) 마스터욱
사소한 행복에 관한 정의 마스터욱
강철부대 감상후기 마스터욱
업비트 공지사항 크롤링 강좌 댓글 8 마스터욱
24년만에 다시 해보는 프린세스 메이커2 마스터욱
웃고 싶을때마다 간혹 보는 뜨거운 형제들의 서지석 편 마스터욱
라이즈 오브 더 툼레이더 후기~ 마스터욱
라이즈 오브 더 툼레이더(rise of the tomb raider) 마스터욱
비트코인 2800만원 돌파 마스터욱