当前位置：首页 > HTML

h5实现聊天功能

2026-03-06 09:49:56HTML

使用WebSocket实现实时聊天

H5可以通过WebSocket技术实现实时双向通信。WebSocket是HTML5提供的协议，适合聊天类应用。

创建WebSocket连接：

const socket = new WebSocket('ws://your-server-url');

socket.onopen = function() {
    console.log('连接已建立');
};

socket.onmessage = function(event) {
    const message = event.data;
    // 处理接收到的消息
    displayMessage(message);
};

socket.onclose = function() {
    console.log('连接已关闭');
};

发送消息：

function sendMessage(message) {
    if (socket.readyState === WebSocket.OPEN) {
        socket.send(message);
    }
}

使用Server-Sent Events(SSE)实现单向通信

SSE适合服务器向客户端推送消息的场景，实现简单。

建立SSE连接：

const eventSource = new EventSource('sse-server-url');

eventSource.onmessage = function(event) {
    const message = event.data;
    displayMessage(message);
};

使用WebRTC实现点对点聊天

WebRTC支持浏览器间直接通信，适合去中心化聊天应用。

建立连接：

const peerConnection = new RTCPeerConnection(configuration);

peerConnection.ondatachannel = function(event) {
    const channel = event.channel;
    channel.onmessage = function(event) {
        displayMessage(event.data);
    };
};

const dataChannel = peerConnection.createDataChannel('chat');
dataChannel.onopen = function() {
    console.log('通道已打开');
};
dataChannel.onmessage = function(event) {
    displayMessage(event.data);
};

使用长轮询技术

对于不支持WebSocket的环境，可采用长轮询模拟实时通信。

客户端轮询：

function pollMessages() {
    fetch('/get-messages')
        .then(response => response.json())
        .then(messages => {
            messages.forEach(displayMessage);
            pollMessages(); // 继续轮询
        });
}

界面实现示例

基本聊天界面HTML结构：

<div id="chat-container">
    <div id="messages"></div>
    <input type="text" id="message-input">
    <button id="send-button">发送</button>
</div>

样式处理：

#chat-container {
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
}
#messages {
    height: 350px;
    overflow-y: auto;
}

消息处理与显示

接收并显示消息：

function displayMessage(message) {
    const messagesDiv = document.getElementById('messages');
    const messageElement = document.createElement('div');
    messageElement.textContent = message;
    messagesDiv.appendChild(messageElement);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}