用bootstrap写一个即时聊天工具
时间: 2024-05-08 08:21:35 浏览: 13
好的,以下是一个简单的即时聊天工具的 Bootstrap 实现:
HTML 代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<h1 class="text-center my-5">Chat App</h1>
<div id="chat-window" class="border rounded p-3 mb-5">
<div id="chat-messages"></div>
<form id="chat-form" class="mt-3">
<div class="form-group">
<input type="text" id="message" class="form-control" placeholder="Enter message...">
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
```
CSS 代码:
```css
#chat-window {
height: 400px;
overflow-y: scroll;
}
```
JavaScript 代码:
```javascript
// 初始化 Firebase
var config = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID"
};
firebase.initializeApp(config);
// 创建一个实时数据库引用
var dbRef = firebase.database().ref();
// 监听新消息的添加
dbRef.child('messages').on('child_added', function(snapshot) {
var message = snapshot.val();
var messageHTML = '<p><strong>' + message.username + ':</strong> ' + message.text + '</p>';
$('#chat-messages').append(messageHTML);
$('#chat-window').scrollTop($('#chat-window')[0].scrollHeight);
});
// 提交新消息
$('#chat-form').submit(function(e) {
e.preventDefault();
var username = 'Guest';
var message = $('#message').val();
if (message !== '') {
dbRef.child('messages').push({
username: username,
text: message
});
$('#message').val('');
}
});
```
上面的代码使用 Firebase 实时数据库来存储聊天消息,然后使用 jQuery 和 Bootstrap 来创建聊天窗口和表单。你需要将 `YOUR_API_KEY`, `YOUR_AUTH_DOMAIN`, `YOUR_DATABASE_URL`, `YOUR_PROJECT_ID`, `YOUR_STORAGE_BUCKET` 和 `YOUR_MESSAGING_SENDER_ID` 替换为你自己的 Firebase 项目的信息。
在你的 Firebase 控制台中,你需要创建一个名为 `messages` 的新节点,用来存储聊天消息。
请注意,这只是一个基本的示例,不应该用于生产环境。在实际应用中,你需要添加更多的功能和安全性措施。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)