看代碼之前呢，先來一張預(yù)覽圖

（因?yàn)檫@里填寫圖片簡書會進(jìn)行采集碍庵，但是采集失敗映企，失敗幾次，放棄了静浴，所以這里放圖片鏈接）點(diǎn)擊查看 預(yù)覽圖

PHP 部分

服務(wù)器呢堰氓，使用的是swoole 的websocket + table ,websocket 負(fù)責(zé)與前JS 進(jìn)行通信，table 則負(fù)責(zé)記錄用戶信息苹享，實(shí)現(xiàn)進(jìn)程間的數(shù)據(jù)共享

<?php

use Swoole\Table;
use Swoole\WebSocket\Server;
use Swoole\Http\Request;
use Swoole\WebSocket\Frame;

/**
 * Class ChatServer
 * @author: gaolei 2021/3/9 2:48 下午
 * @property Server $server
 * @property Table $table
 */
class ChatServer
{

    protected $server;
    protected $table;

    const ACTION_JOIN = 'join';
    const ACTION_SEND = 'send';

    public function __construct(string $host, int $port)
    {
        $this->server = new Server($host, $port);
        $this->server->on('Open', [$this, 'onOpen']);
        $this->server->on('Message', [$this, 'onMessage']);
        $this->server->on('Close', [$this, 'onClose']);

        // 內(nèi)存表 實(shí)現(xiàn)進(jìn)程間共享數(shù)據(jù)双絮，也可以使用redis替代
        $this->createTable();
    }

    private function createTable()
    {
        $this->table = new Table(1024);
        $this->table->column('id', Table::TYPE_INT);
        $this->table->column('name', Table::TYPE_STRING, 255);
        $this->table->create();
    }

    public function run()
    {
        $this->server->start();
    }

    public function onOpen(Server $server, Request $request)
    {
        $user = ['id' => $request->fd, 'name' => ''];
        $this->table->set($request->fd, $user);
    }

    public function onMessage(Server $server, Frame $frame)
    {
        $params = json_decode($frame->data, true);
        // 接收到消息，根據(jù)消息類型進(jìn)行不同的處理
        switch ($params['action']) {
            case self::ACTION_JOIN:
                $this->join($frame->fd, $params['value']);
                break;
            case self::ACTION_SEND:
                $this->send($frame->fd, $params['value']);
                break;
        }
    }

    public function onClose(Server $server, int $fd)
    {
        $user = $this->table->get($fd);
        $this->table->del($fd);
        echo "{$user['name']} 退出聊天室 \n";
        $time = date('Y-m-d H:i:s');
        // 將當(dāng)前用戶 '退出的消息' 推送給聊天室 剩余的其他用戶
        foreach ($this->table as $member) {
            if ($member['id'] === $fd) {
                continue;
            }
            $res = ['code' => 'someone_out', 'data' => [
                'time' => $time, 'msg' => "{$user['name']} 退出聊天室",
                'member_id' => $user['id']
            ]];
            $this->server->push($member['id'], json_encode($res));
        }
    }

    private function getMembers()
    {
        $members = [];
        foreach ($this->table as $member) {
            $members[] = $member;
        }
        return $members;
    }

    private function join(int $fd, string $name)
    {
        $user = $this->table->get($fd);
        $user['name'] = $name;
        // 將當(dāng)前用戶的信息 記錄到 table 中
        $this->table->set($fd, $user);
        $time = date('Y-m-d H:i:s');
        echo "歡迎 {$fd}:{$name} 加入聊天室\n";
        $members = $this->getMembers();
        $membersObj = array_combine(array_column($members, 'id'), array_column($members, 'name'));
        foreach ($this->table as $member) {
            if ($member['id'] === $fd) {
                // 將'加入成功'的消息 與 '當(dāng)前聊天室的人員信息' 推送給當(dāng)前用戶
                $res = ['code' => 'add_success', 'data' => [
                    'time' => $time, 'msg' => "歡迎 {$name} 加入聊天室",
                    'members' => $members, 'membersObj' => $membersObj,
                    'self' => $member
                ]];
            }else{
                // 將當(dāng)前用戶 '加入的消息' 推送給聊天室 的其他用戶
                $res = ['code' => 'new_member', 'data' => [
                    'time' => $time, 'msg' => "歡迎 {$name} 加入聊天室",
                    'user' => $user
                ]];
            }
            $this->server->push($member['id'], json_encode($res));
        }
    }

    private function send(int $fd, string $msg)
    {
        $user = $this->table->get($fd);
        echo "{$user['name']} send : $msg\n";
        $time = date('Y-m-d H:i:s');
        foreach ($this->table as $member) {
            // 只將消息推送個(gè) 已注冊昵稱 且 連接有效的聊天室用戶
            if($member['name'] && $this->server->isEstablished($member['id'])){
                if ($member['id'] == $fd) {
                    // 將'發(fā)送成功'的消息推送給當(dāng)前用戶
                    echo "send to: {$member['id']} {$member['name']} success" . "\n";
                    $res = ['code' => 'send_success', 'data' => [
                        'time' => $time, 'msg' => $msg, 'author' => $fd
                    ]];
                }else{
                    // 將當(dāng)前用戶 '發(fā)送的消息' 推送給聊天室 的其他用戶
                    echo "send to: {$member['id']} {$member['name']} success" . "\n";
                    $res = ['code' => 'new_message', 'data' => [
                        'time' => $time, 'msg' => $msg, 'author' => $fd
                    ]];
                }
                $this->server->push($member['id'], json_encode($res));
            }
        }
    }
}
$chat = new ChatServer('0.0.0.0', 9501);
$chat->run();

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ChatRoom</title>
    <link rel="stylesheet" href="statics/chat-room.css">
</head>
<body>
<div class="chart-room">
    <div class="room-header" style="line-height: 30px">
        <div class="welcome-msg">歡迎 <span id="nickname"></span> 來到 高雷 的 網(wǎng)頁聊天室</div>
    </div>
    <div class="room-body">
        <div id="msg-list"></div>
        <div id="members"></div>
    </div>
    <div class="room-footer">
        <textarea name="message" id="message"></textarea>
        <div id="send_btn">
            發(fā)送<span class="notice">快捷鍵：Ctrl/command + Enter</span>
        </div>
    </div>
</div>
<script src="statics/chat-room.js"></script>
</body>
</html>

Script

var msgIpt = document.getElementById('message'),
    sendBtn = document.getElementById('send_btn'),
    msgList = document.getElementById('msg-list'),
    nickname, members, membersObj,mouseIn = false;

// 用戶加入之前需要填寫昵稱得问，昵稱顯示在用戶列表
nickname = getNick()
document.getElementById('nickname').innerText = nickname;
var wsAddress = 'ws://127.0.0.1:9501',
    socket = new WebSocket(wsAddress),
    mine;
socket.onopen = function (evt) {
    addNotice('連接成功');
    register();
};
socket.onclose = function (evt) {
    console.log("Disconnected");
};
socket.onerror = function (evt, e) {
    console.log('Error occured: ' + evt.data);
};
socket.onmessage = recv;

// 獲取用戶的昵稱
function getNick() {
    var nick = (prompt('請輸入您的昵稱') || '').replace(/(^\s*)|(\s*$)/g, "");
    if (nick.length > 0) {
        addNotice('連接中...')
        return nick;
    }
    return getNick();
}

// JSON 對象 轉(zhuǎn) json 字符串
function toJSON(data) {
    return JSON.stringify(data);
}

// 注冊并加入聊天室
function register() {
    socket.send(toJSON({action: 'join', value: nickname}));
}

// 監(jiān)聽 發(fā)送按鈕
sendBtn.onclick = function () {
    var msg = msgIpt.value;
    if (msgIpt.value.length < 1) {
        return msgIpt.focus();
    }
    socket.send(toJSON({action: 'send', value: msg}));
    msgIpt.value = '';
}

// 監(jiān)聽消息發(fā)送組合鍵
document.onkeydown = function (oEvent) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if ((e.keyCode === 13) && (e.ctrlKey || e.metaKey)) {
        sendBtn.click();
    }
}

msgList.onmouseover = function () {
    mouseIn = true;
}
msgList.onmouseleave = function () {
    mouseIn = false;
}

// 接受處理信息
function recv(evt) {
    try {
        var response = JSON.parse(evt.data)
        switch (response.code) {
            case "add_success":
                return addSuccess(response.data)
            case "new_member":
                return newMember(response.data)
            case 'new_message':
                return newMessage(response.data)
            case 'send_success':
                return sendSuccess(response.data)
            case 'someone_out':
                return someoneOut(response.data)
        }
    } catch (e) {
        // 打印錯(cuò)誤信息
        console.log([e, evt]);
    }
}

// 加入聊天室成功囤攀，將已有的人員寫入列表
function addSuccess(data) {
    console.log(['addSuccess', data])
    addNotice(data.time + '　' + data.msg)
    mine = data.self;
    members = data.members;
    membersObj = data.membersObj;
    console.log([mine, members, membersObj])
    members.forEach(function (v) {
        addMemberLine(v)
    })
}

// 消息發(fā)送成功
function sendSuccess(data) {
    console.log(['sendSuccess', data])
    addMessageLine(data, 1)
}

// 接受到新的消息
function newMessage(data) {
    console.log(['newMessage', data])
    addMessageLine(data, 2)
}

// 接收到有新的人加入到聊天室
function newMember(data) {
    console.log(['newMember', data])
    addNotice(data.time + '　' + data.msg)
    members.push(data.user);
    membersObj[data.user.id] = data.user.name;
    console.log([mine, members, membersObj])
    addMemberLine(data.user);
}

// 有人退出聊天室
function someoneOut(data) {
    console.log(['someoneOut', data])
    addNotice(data.time + '　' + data.msg)
    removeMemberLine(data.member_id)
}

// 添加 提示信息
function addNotice(msg) {
    var dom = document.createElement('div');
    dom.className = 'notice';
    dom.innerText = msg;
    msgList.appendChild(dom);
}

// 添加一行消息展示
function addMessageLine(data, type) {
    if(!membersObj[data.author]){
        return;
    }
    var box = document.createElement('div'),
        author = document.createElement('div'),
        msg = document.createElement('div'),
        name = document.createElement('span'),
        time = document.createElement('span');
    box.className = type === 1 ? 'mine' : 'other';
    author.className = 'author';
    msg.className = 'msg';
    name.className = 'name';
    time.className = 'time';
    name.innerText = membersObj[data.author];
    time.innerText = data.time;
    author.appendChild(name);
    author.innerHTML += '：'
    author.appendChild(time);
    msg.innerText = data.msg;
    box.appendChild(author);
    box.appendChild(msg);
    msgList.appendChild(box);
    if(mouseIn){
        return;
    }
    msgList.scrollTop = msgList.scrollHeight;
}

// 新的人加入，將用戶人員信息寫入列表
function addMemberLine(user) {
    var memberList = document.getElementById('members'),
        item = document.createElement('div');
    if (user.id == mine.id) {
        item.className = 'member-item self'
    } else {
        item.className = 'member-item'
    }
    item.innerText = user.name;
    item.id = 'member_' + user.id;
    memberList.appendChild(item);
}

// 有人退出網(wǎng)頁宫纬，在用戶列表將其移除
function removeMemberLine(id) {
    var line = document.getElementById('member_'+id);
    if(line)line.remove();
}

Css

* {margin: 0;padding: 0}
html, body {height: 100%;}
body {
    display: flex;justify-content: center;align-items: center;background: #000
}

.chart-room {
    width: 1000px;height: 100%;max-height: 800px;margin: auto;background: #333;box-shadow: 0 0 10px #222;
    padding: 5px;color: #888;display: flex;flex-wrap: wrap;align-items: center;
}
.chart-room > div {
    width: 100%;background: #333;
}

/* 頭部信息展示部分 */
.room-header {
    height: 80px;border-bottom: 1px solid #888;
}
.room-header #nickname {
    color: red
}

/* 消息展示部分 */

.room-body {
    display: flex;width: 100%;height: calc(100% - 185px);
}
.room-body #members {
    width: 150px;background: #2d3a4c;padding: 8px 0;overflow-y: scroll;
}
.room-body #members .member-item {
    line-height: 20px;padding: 0 5px;font-size: 13px;
}
.room-body #members .member-item.self {
    color: #f54cd8;
}
.room-body #members .member-item:hover {
    background: #384153;
}

.room-body #msg-list {
    width: calc(100% - 150px);overflow-y: scroll;padding: 5px;
}
.room-body #msg-list > * {margin-bottom: 10px}
.room-body #msg-list .notice{
    text-align: center;font-size: 13px;
}

.room-body #msg-list .other,.room-body #msg-list .mine{
    display: flex;
}
.room-body #msg-list .msg,.room-body #msg-list .author{
    display: flex;align-items: center;padding: 5px;line-height: 27px;
}
.room-body #msg-list .author .time{font-size: 12px}
.room-body #msg-list .msg{
    background: #666;border-radius: 3px;font-size: 13px;line-height: 17px;
    max-width: 200px;padding: 3px 10px;height: auto;
}
.room-body #msg-list .msg::selection{
    background: #336666;color: red;
}

/* 其他人發(fā)送的消息*/
.room-body #msg-list .other{flex-direction: row}

/* 我自己發(fā)送的消息 */
.room-body #msg-list .mine{flex-direction: row-reverse}

/* 發(fā)送消息部分 */
.room-footer {
    height: 100px;border-top: 1px solid #888;display: flex;align-items: center;
}

.room-footer #message {
    resize: none;width: calc(100% - 180px);height: 89px;line-height: 20px;border-top: none;
    outline: none;padding: 5px;overflow-y: scroll;color: #888;caret-color: #aaa;
    background: #333;
}

.room-footer #send_btn {
    width: 180px;text-align: center;height: 100px;line-height: 100px;
    user-select: none;background: #366;color: #ccc;position: relative;
}

.room-footer #send_btn:hover {
    background: #355;
}

.room-footer #send_btn:active {
    background: #344;
}

.room-footer #send_btn .notice {
    position: absolute;bottom: 61px;width: 100%;font-size: 12px;color: #999;
    background: none;height: 20px;left: 0;
}

原文鏈接 Swoole + websocket 實(shí)現(xiàn)簡易版網(wǎng)頁聊天室