웹스쿨

채팅방, 채팅리스트 로딩함수 본문

개인 프로젝트/Javascript 카카오 채팅

채팅방, 채팅리스트 로딩함수

마스터욱 2023. 3. 29. 00:46
반응형

간만에 올리는 리뷰입니다.

하루에 하나씩이라도 오픈하고 싶은데, 그게 쉽지가 않네요 ㅡㅜ

일은 일대로 쌓이고, 일하고나면 조금 쉬어줘야 하구 헤헤~

 

get_roomlist_html 함수는 채팅리스트를 불러오는 함수입니다.

get_room_html 함수는 채팅방을 불러오는 함수입니다.

 

그다지 특별한건 없습니다.

%로 둘러싸인 문자열들이 다수 존재하는데요,

모두 자바스크립트에서 치환되어질 동적인 string 이라고 보시면 됩니다.

디자인 프레임워크를 부트스트랩을 사용했기 때문에, 부트스트랩 클래스가 눈에 띄게 보이실 것입니다.

 

실제로 채팅방리스트를 오픈하고 싶으신 페이지에서

echo $core['chating']->get_room_html();

echo $core['chating']->get_roomlist_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
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
public function get_roomlist_html()
{
    $html = '
        <div style="position:fixed;bottom:50px;right:50px;border:1px solid #000;z-index:10000;width:400px;height:500px;overflow-y:auto;background-color:#FFF;" id="talk_list_box">
            <div style="text-align:center;padding:5px;background-color:#eaeaea;cursor:move;">
                <h3><i class="fa fa-list"></i> 채팅 리스트</h3>
            </div>
            <div id="talk_list"></div>
            <div id="talk_list_row" style="display:none;">
                <div class="talk_item" id="talk_item_%방번호%" style="border-bottom:1px solid #E9E9E9;" room="%방번호%">
                    <div style="margin:5px;padding:5px 0px 0px 0px;">
                        <table width="100%">
                        <tr>
                            <td width="20%">
                                <a href="#photo_%방번호%" xrel="modal:open" onclick="show_chating_photo(\'%사진%\');"><img src="%사진%" style="width:50px;height:50px;" id="talk_photo_%방번호%" class="w3-round-jumbo" /></a>
                                <img src="%사진%" class="w3-circle" style="display:none;" id="photo_%방번호%" />
                            </td>
                            <td width="80%">
                                <table width="100%">
                                <tr>
                                    <td align="left" style="font-weight:bold;"><i class="fa fa-user" aria-hidden="true"></i> %닉네임%</td>
                                    <td align="right" style="color:gray;">
                                        <span style="display:inline-block;color:#FFF;background-color:#F76A51;text-align:center;width:20px;line-height:20px;font-weight:bold;" id="read_%방번호%" class="w3-round-jumbo">%안읽은카운트%</span>
                                        %마지막메세지시간%
                                    </td>
                                </tr>
                                <tr>
                                    <td height="10"></td>
                                </tr>
                                <tr>
                                    <td colspan="2" style="color:#737373;">
                                        <div style="float:left;max-width:200px;" class="ellip">%메세지%</div>
                                        <div style="float:right;">
                                            <div id="chat_list_company_%방번호%"><i class="fa fa-diamond" aria-hidden="true"></i> %컴파니네임%</div>
                                        </div>
                                        <div style="clear:both;"></div>
                                    </td>
                                </tr>
                                </table>
                            </td>
                        </tr>
                        </table>
                    </div>
                    <!--<div id="talk_room_%방번호%"></div>-->
                </div>
            </div>
        </div>
    ';
    return $html;
}
public function get_room_html()
{
    $style_1    = "";
    $style_2    = "";
    $style_3    = "";
    $script_1    = "";
    $tag_1        = "";
    if(DEVICE == "m")
    {
        $style_1    = "width:100%;height:100%;";
        $style_2    = "width:100%;height:100%;";
        $style_3    = "height:100%;";
        $script_1    = "onclick='window.close();'";
        $tag_1        = '<a href="%상대방사진%" target="_blank"><img src="%상대방사진%" style="width:40px;height:40px;" class="w3-round-jumbo" /></a>';
    }
    else
    {
        $style_1    = "";
        $style_2    = "width:".chating::CHAT_WIDTH."px;";
        $style_3    = "height:".chating::CHAT_HEIGHT."px;";
        $script_1    = "";
        $tag_1        = '<a href="#photo_%방번호%" xrel="modal:open" onclick="show_chating_photo(\'%상대방사진%\');"><img src="%상대방사진%" style="width:40px;height:40px;" class="w3-round-jumbo" /></a>
            <img src="%상대방사진%" class="w3-circle" style="display:none;" id="photo_%방번호%" />';
    }
    $html = '
        <div id="talk_box" style="position:fixed;z-index:10000000000000;"></div>
        <div id="talk_html_box" style="height:100%;">
            <div id="talk_room_%방번호%" style="'.$style_1.'display:none;position:fixed;%포지션%;">
                <div style="'.$style_2.'border:1px solid #c1c1c1;">
                    <div style="line-height:30px;background-color:#ABC3D9;text-align:center;cursor:move;" id="talk_room_title_%방번호%">
                        <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td width="10%"></td>
                            <td width="80%">
                                <div><b style="font-weight:bold;">%상대방닉네임%</b> 님과의 대화</div>
                                <div style="font-weight:bold;" id="talk_company_%방번호%">%컴파니네임%</div>
                            </td>
                            <td width="10%" align="right" style="padding-right:10px;">
                                <i class="fa fa-times" aria-hidden="true" style="cursor:pointer;" id="talk_close_%방번호%" '.$script_1.'></i>
                            </td>
                        </tr>
                        </table>
                    </div>
                    <div id="talk_contentbox_%방번호%" style="height:100%;">
                        <div style="background-color:#B4CDE5;'.$style_3.';overflow-y:auto;" id="talk_content_%방번호%"></div>
                        <div>
                            <table width="100%" cellpadding="0" cellspacing="0">
                            <tr>
                                <td colspan="2" style="background-color:#FFF;height:70%;">
                                    <textarea style="width:100%;height:57px;font-size:12px;color:#000;box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing: border-box;padding:5px;border:0px;" id="chatbox_%방번호%"></textarea>
                                </td>
                            </tr>
                            <tr>
                                <td width="50%" valign="top">
                                    <div style="position:relative;">
                                        <form action="action.php?c=chating&f=proc" id="talk_form_%방번호%" method="post" enctype="multipart/form-data">
                                            <input type="hidden" name="type" value="image_upload" />
                                            <input type="file" name="image" id="talk_image_%방번호%" style="width:100%;height:30px;position:absolute;top:0px;left:0px;z-index:10;opacity:0;filter:alpha(opacity=0);cursor:pointer;" />
                                        </form>
                                        <input type="button" style="position:absolute;top:0px;left:0px;width:100%;height:30px;background-color:#efefef" value="사진첨부" class="w3-btn w3-indigo" />
                                    </div>
                                </td>
                                <td width="50%">
                                    <input type="button" class="w3-btn" value="전송" style="width:100%;height:30px;" id="talk_submit_%방번호%" />
                                </td>
                            </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div style="display:none;" id="talk_me_%방번호%">
                <div style="padding:2px 10px;" class="talk_me" primary_number="%고유번호%">
                    <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td align="right">
                            <span style="display:inline-block;font-size:11px;">
                                <span style="color:yellow;">
                                    <span class="is_read">%읽음%</span>
                                </span>
                                <br>
                                %작성시간%
                            </span>
                            <span style="display:inline-block;padding:10px;font-size:11px;word-break: break-all;" class="bubble_right">
                                %메세지%
                            </span>
                        </td>
                    </tr>
                    </table>
                </div>
            </div>
            <div style="display:none;" id="talk_other_%방번호%">
                <div style="padding:5px 10px;">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td align="left" rowspan="2" width="40" valign="top">'.$tag_1.'</td>
                        <td align="left" style="padding-left:10px;color:#333333;font-size:11px;">%닉네임%</td>
                    </tr>
                    <tr>
                        <td align="left" style="padding-left:10px;">
                            <span style="padding:10px;display:inline-block;font-size:11px;word-break: break-all;" class="bubble_left">%메세지%</span>
                            <span style="font-size:11px;">%작성시간%</span>
                        </td>
                    </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal fade" id="model_chating_photo">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="width:30px;height:30px;">
                        <span aria-hidden="true" style="font-size:30px;">&times;</span></button>
                    </div>
                    <div class="modal-body text-center">
                        <img src="" id="chating_photo_box" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-raised" data-dismiss="modal"><i class="fa fa-remove"></i> 닫기</button>
                    </div>
                </div>
            </div>
        </div>
    ';
    return $html;
}
cs

 

이 게시글은
https://webschool.kr/?v=board_view&board_key=46&idx=834
에서 작성한 글입니다. 소스코드의 경우 해당 블로그에서 이뿌게 노출이 되지 않을 수 있사오니, 위 링크로 들어오셔서 보시길 바랍니다.
반응형

'개인 프로젝트 > Javascript 카카오 채팅' 카테고리의 다른 글

웹 채팅 라이브러리(Chating library) 자바스크립트(javascript) 소스 오픈  (0) 2023.03.29
javascript 기반 카카오 웹채팅 개발일지  (0) 2023.03.29
'개인 프로젝트/Javascript 카카오 채팅' Related Articles more