jQuery实现简单聊天室

下面我给你详细讲解一下“jQuery实现简单聊天室”的完整攻略。

一、前置知识

在开始使用jQuery实现简单聊天室之前，你需要具备以下知识：

HTML/CSS基础知识
JavaScript基础知识
jQuery基础知识

二、创建HTML结构

首先，我们需要创建一个HTML结构，用来承载聊天室的内容。整个聊天室的布局可以分为两部分，头部和消息部分。

头部包含一个输入框和一个按钮，用来发送消息；消息部分是一个列表，用来展示聊天记录。下面是HTML代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery实现简单聊天室</title>
    <style>
        body{margin: 0;padding: 0;font-family: "微软雅黑"}
        #header{background-color: #00BCD4;width: 100%;height: 50px;line-height: 50px;text-align: center;color: #fff;position: fixed;top: 0;left: 0;}
        #message{width: 90%;margin: 60px auto 0;background-color: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0,0,0,.1);}
        #messages{list-style: none;padding: 0;margin: 0;}
        .message{margin-bottom: 10px;}
        .info{color: #aaa;font-size: 12px;margin-right: 10px;display: inline-block;}
        .content{padding: 10px;border: 1px solid #eee;border-radius: 5px;background-color: #f9f9f9;display: inline-block;}
    </style>
</head>
<body>
    <div id="header">
        <input type="text" id="username" placeholder="请输入用户名" style="width: 150px;height: 30px;padding: 5px;border: none;border-radius: 5px;margin-right: 10px">
        <input type="text" id="message-input" placeholder="请输入消息" style="width: 500px;height: 30px;padding: 5px;border: none;border-radius: 5px;margin-right: 10px">
        <button id="send">发送</button>
    </div>

    <div id="message">
        <ul id="messages"></ul>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="./main.js"></script>
</body>
</html>

三、编写JavaScript代码

上面的HTML代码中引入了一个名为main.js的JavaScript文件，接下来我们就要在这个文件中编写JavaScript代码来实现聊天室的功能。

连接WebSocket

我们首先需要连接WebSocket，以便能够实时接收和发送消息。我们可以使用标准的WebSocket API或者基于jQuery的websocket插件来实现。这里我们就以基于jQuery的websocket插件为例。

$(function(){
    // 连接WebSocket
    var socket = $.websocket("ws://localhost:8080/chat", {
        events: {
            // 连接成功处理函数
            open: function() {
                // 连接成功后要做的事情
            },
            // 接收消息处理函数
            message: function(evt) {
                // 接收到消息后要做的事情
            },
            // 连接关闭处理函数
            close: function() {
                // 连接关闭后要做的事情
            },
            // 连接出错处理函数
            error: function() {
                // 连接出错后要做的事情
            }
        }
    });
});

发送消息

发送消息可以通过在输入框中输入消息内容，然后点击“发送”按钮实现。我们可以通过以下代码来实现：

$(function(){
    // 获取元素
    var messageInput = $("#message-input");
    var usernameInput = $("#username");
    var sendButton = $("#send");

    // 点击发送按钮时处理函数
    sendButton.click(function() {
        // 获取输入框中的消息内容
        var message = messageInput.val();
        var username = usernameInput.val();

        // 将输入框内容清空
        messageInput.val("");

        // 发送消息
        socket.send(JSON.stringify({
            username: username,
            message: message
        }));
    });
});

接收并展示消息

接收到消息后，我们需要将消息展示在页面上。我们可以使用jQuery的append方法来向列表中追加每条消息的HTML代码。

$(function(){
    // 获取元素
    var messagesList = $("#messages");

    // 接收到消息后的处理函数
    socket.onMessage(function(evt) {
        // 将接收到的JSON字符串解析为对象
        var data = JSON.parse(evt.data);

        // 拼接消息的HTML代码
        var messageHtml =
            '<li class="message">' +
                '<span class="info">'+ data.username +'</span>' +
                '<span class="content">'+ data.message +'</span>' +
            '</li>';

        // 将消息追加到列表中
        messagesList.append(messageHtml);
    });
});

四、示例说明

以上是jQuery实现简单聊天室的完整攻略，下面我将给你两个示例说明。

示例1：发送图片

在发送消息时，我们也可以通过输入一个图片URL来发送图片。我们可以通过以下代码来实现：

$(function(){
    // 获取元素
    var messageInput = $("#message-input");
    var usernameInput = $("#username");
    var sendButton = $("#send");

    // 点击发送按钮时处理函数
    sendButton.click(function() {
        // 获取输入框中的消息内容
        var message = messageInput.val();
        var username = usernameInput.val();

        // 如果输入的是图片URL，则创建一个<img>标签
        var img = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?\.(jpg|gif|png)$/i.test(message) ?
            '<img src="'+ message +'" style="max-width: 100%" />' : null;

        // 将输入框内容清空
        messageInput.val("");

        // 发送消息
        socket.send(JSON.stringify({
            username: username,
            message: message,
            img: img
        }));
    });
});

示例2：实现表情选择器

我们可以通过添加表情选择器来让用户在发送消息时选择表情。具体实现方法可以参考下面的代码：

<div id="header">
    <input type="text" id="username" placeholder="请输入用户名" style="width: 150px;height: 30px;padding: 5px;border: none;border-radius: 5px;margin-right: 10px">
    <input type="text" id="message-input" placeholder="请输入消息" style="width: 400px;height: 30px;padding: 5px;border: none;border-radius: 5px;margin-right: 10px">
    <button id="send">发送</button>

    <div id="emoji-picker">
        <a href="javascript:;" class="emoji-picker-icon">&#x1F600;</a>
        <div class="emoji-picker-panel">
            <a href="javascript:;" class="emoji-picker-item">&#x1F600;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F601;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F602;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F603;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F604;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F605;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F606;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F607;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F608;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F609;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F60A;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F60B;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F60C;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F60D;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F60E;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F60F;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F610;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F611;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F612;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F613;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F614;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F615;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F616;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F617;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F618;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F619;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F61A;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F61B;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F61C;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F61D;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F61E;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F61F;</a>
            <a href="javascript:;" class="emoji-picker-item">&#x1F620;</a>
        </div>
    </div>
</div>

$(function(){
    // 获取元素
    var messageInput = $("#message-input");
    var usernameInput = $("#username");
    var sendButton = $("#send");
    var emojiPickerIcon = $(".emoji-picker-icon");
    var emojiPickerPanel = $(".emoji-picker-panel");
    var emojiPickerItems = $(".emoji-picker-item");

    // 点击发送按钮时处理函数
    sendButton.click(function() {
        // 获取输入框中的消息内容
        var message = messageInput.val();
        var username = usernameInput.val();

        // 如果输入的是图片URL，则创建一个<img>标签
        var img = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?\.(jpg|gif|png)$/i.test(message) ?
            '<img src="'+ message +'" style="max-width: 100%" />' : null;

        // 将输入框内容清空
        messageInput.val("");

        // 发送消息
        socket.send(JSON.stringify({
            username: username,
            message: message,
            img: img
        }));
    });

    // 点击表情选择器图标时显示/隐藏表情选择器
    emojiPickerIcon.click(function() {
        emojiPickerPanel.toggle();
    });

    // 点击表情时将表情添加到输入框中
    emojiPickerItems.click(function() {
        messageInput.val(messageInput.val() + $(this).html());
        emojiPickerPanel.hide();
    });
});

好了，以上就是jQuery实现简单聊天室的完整攻略和示例说明。希望能够对你有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现简单聊天室 - Python技术站