tab页聊天室

发表于

实现多Tab页聊天

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>简单聊天室</title>  
<style>  
  #chat-log {  
    height: 200px;  
    overflow-y: scroll;  
    border: 1px solid #ccc;  
    padding: 10px;  
    margin-bottom: 10px;  
  }  
</style>  
</head>  
<body>  
<div id="chat-log"></div>  
<input type="text" id="message-input" placeholder="输入消息...">  
<button onclick="sendMessage()">发送</button>  
  
<script src="chatroom.js"></script>  
</body>  
</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
// 监听 localStorage 变化
window.addEventListener('storage', function (event) {
  if (event.key === 'newMessage') {
    const newMessage = event.newValue
    displayMessage(newMessage)
  }
})

// 显示消息到聊天日志中
function displayMessage(message) {
  const chatLog = document.getElementById('chat-log')
  const p = document.createElement('p')
  p.textContent = message
  chatLog.appendChild(p)
  chatLog.scrollTop = chatLog.scrollHeight // 滚动到最新消息
}

// 发送消息到 localStorage
function sendMessage() {
  const messageInput = document.getElementById('message-input')
  const message = messageInput.value.trim()

  if (message) {
    localStorage.setItem('newMessage', message) // 存储消息到 localStorage
    messageInput.value = '' // 清空输入框
    messageInput.focus() // 重新聚焦到输入框
    displayMessage(`我: ${message}`) // 在当前标签页也显示消息
  }
}

// 初始化时检查是否有未处理的消息
;(function checkInitialMessages() {
  const initialMessage = localStorage.getItem('newMessage')
  if (initialMessage) {
    displayMessage(initialMessage) // 显示初始消息
    localStorage.removeItem('newMessage') // 清除 localStorage 中的消息，避免重复显示
  }
})()

在这个例子中，我们监听storage事件来捕获其他标签页中localStorage的变化。当用户在某个标签页中输入消息并点击“发送”按钮时，消息会被存储到localStorage中，并且触发storage事件。所有监听这个事件的标签页都会接收到这个事件，并从localStorage中读取新的消息，然后显示在聊天日志中。

请注意，由于localStorage的更新是异步的，并且不同的浏览器可能有不同的行为，因此在实际应用中可能需要添加一些额外的逻辑来处理可能出现的竞态条件或数据不一致问题。此外，这个例子没有处理用户身份验证和消息历史记录管理，这些都是在实际聊天室应用中需要考虑的重要方面。