u252967
/
flask_chatroom


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
							<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .container{
            margin: 25px;
        }
        .text{
            margin: 10px 0;
        }
        .buttons{
            margin: 10px 0;
        }
    </style>
    
    
</head>
<body>
<div class="container">

    <textarea class="form-control" rows=10></textarea>
    <div class="form-group">
        <form>
            <div class="text">
                <input type="text" class="form-control" id="content"/ >
            </div>
            <div class="buttons">
                <input type="button" value="发送" class="btn btn-primary btn-sm" id="submitBtn"/>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
<script type="text/javascript">
  $(()=>{
    let socket = io('http://localhost:5000/chat');
    let account = "{{account}}"
    socket.on('connect',  (data)=>{
     //console.log('')
    })
    socket.on('connected', (data)=> {
      $('textarea').append(`&#10;${data.account}加入了群聊`);
    })

    socket.on('message', (data)=>{
      $('textarea').append(`&#10;${data.account}: ${data.content}`);
    })
    
    $('#submitBtn').click(()=>{
      let content = $('#content').val();
      socket.emit('message', {'content': content})
    })
  })

</script>
    
</body>

</html>