maple-bbs/templates/board/chat.html

{% if g.user.is_authenticated %}
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script type="text/javascript" src="{{ url_for('static',filename='socketio/chat.js')}}"></script>
<script type="text/javascript" charset="utf-8">
 function leave_room() {
     socket.emit('left', {}, function() {
         socket.disconnect();
         window.location.href = "{{ url_for('forums.board') }}";
     });
 }
 $(document).ready(function(){
     $(".chatroom-panel").hide();
     $('.chatroom-feedback').click(function() {
         if($('.chatroom-feedback').hasClass('chatroom-open')) {
             $('.chatroom-feedback').removeClass('chatroom-open');
             $('.chatroom-feedback').addClass('chatroom-close');
             $('.chatroom').css({'width':'563px','height':'405px'});
             $('.chatroom-panel').show();
             $('.chatroom').removeClass('panel-default');
             $('.chatroom').addClass('panel-primary');
         } else {
             $('.chatroom-feedback').removeClass('chatroom-close');
             $('.chatroom-feedback').addClass('chatroom-open');
             $('.chatroom').css({'width':'150px','height':'32px'});
             $('.chatroom-panel').hide();
             $('.chatroom').removeClass('panel-primary');
             $('.chatroom').addClass('panel-default');
         }
     });
 });
</script>
<link rel="stylesheet" href="{{ url_for('static',filename='socketio/chat.css')}}" type="text/css" />
<div class="chatroom panel panel-default" style="border:0px;margin-bottom:0">
    <div class="panel-heading">
        <span class="chatroom-feedback chatroom-open"></span>
    </div>
    <div class="chatroom-panel panel-body">
        <div contentEditable="false" id="chat" style="width:100%;height:300px;overflow-y:auto;background-color:#f2f2f5;padding:0 10px 0 10px">
        </div>
        <div class="chatroom-send form-inline" style="padding:0 10 0 10">
            <div class="form-group">
                <textarea type="text" class="chatroom-input"  id="text"  rows="3" cols="56" placeholder="按Ctrl + Enter 发送"></textarea>
            </div>
            <button type="button" class="btn btn-success send-msg">发送</button>
        </div>
    </div>
</div>
{%- endif %}