Skip to content

Instantly share code, notes, and snippets.

@BetterProgramming
Created July 13, 2020 20:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BetterProgramming/c96aa988de87ee50c76d231fd84f553b to your computer and use it in GitHub Desktop.
Save BetterProgramming/c96aa988de87ee50c76d231fd84f553b to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<head>
<title>Simple realtime chatroom</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="title">
<h3>Realtime Chat Room</h3>
</div>
<div class="card">
<div class="card-header">Anonymous</div>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" id="username" placeholder="Change your username" >
<div class="input-group-append">
<button class="btn btn-warning" type="button" id="usernameBtn">Change</button>
</div>
</div>
</div>
<div class="message-box">
<ul class="list-group list-group-flush" id="message-list"></ul>
<div class="info"></div>
</div>
<div class="card-footer">
<div class="input-group">
<input type="text" class="form-control" id="message" placeholder="Send new message" >
<div class="input-group-append">
<button class="btn btn-success" type="button" id="messageBtn">Send</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<script src="/js/chatroom.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment