写一个基于jQuery可以相互聊天的h5聊天窗口示例

好的，以下是一个基于jQuery的h5聊天窗口示例：

HTML代码：

<div class="chat-container">
  <div class="chat-header">
    <h3>Chat Window</h3>
  </div>
  <div class="chat-messages">
    <!-- 这里是聊天消息显示区域 -->
  </div>
  <div class="chat-input">
    <input type="text" placeholder="Type your message...">
    <button>Send</button>
  </div>
</div>

CSS样式：

.chat-container {
  width: 400px;
  height: 500px;
  border: 1px solid #ccc;
  margin: 20px auto;
  padding: 10px;
}

.chat-header {
  text-align: center;
  margin-bottom: 10px;
}

.chat-messages {
  height: 350px;
  overflow-y: scroll;
  padding: 5px;
}

.chat-message {
  margin-bottom: 10px;
}

.chat-message p {
  padding: 5px;
  background-color: #f2f2f2;
  border-radius: 5px;
  display: inline-block;
}

.chat-input {
  display: flex;
}

.chat-input input {
  flex-grow: 1;
  padding: 5px;
  border-radius: 5px;
  border: none;
  margin-right: 10px;
}

.chat-input button {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

JavaScript代码：

$(function() {
  var socket = io(); // 连接socket.io服务器

  // 发送消息
  $('button').click(function() {
    var message = $('input').val();
    if (message !== '') {
      socket.emit('chat message', message);
      $('input').val('');
    }
  });

  // 接收消息
  socket.on('chat message', function(msg) {
    $('.chat-messages').append($('<div class="chat-message">').html('<p>' + msg + '</p>'));
    $('.chat-messages').scrollTop($('.chat-messages')[0].scrollHeight);
  });
});

需要注意的是，这个示例依赖于socket.io库，所以需要先在HTML文件中引入socket.io库：

<script src="/socket.io/socket.io.js"></script>

同时，还需要在服务器端实现socket.io的相关逻辑，这里不再赘述。