1.效果图

2.PHP代码

<?php
use Workerman\Worker;
require_once 'Autoloader.php';

$global_uid = 0;
// 当客户端连上来时分配uid，并保存连接，并通知所有客户端
function handle_connection($connection)
{
    global $text_worker, $global_uid;
    // 为这个链接分配一个uid
    $connection->uid = ++$global_uid;
}
// 当客户端发送消息过来时，转发给所有人
function handle_message($connection, $data)
{
    global $text_worker;
    foreach($text_worker->connections as $conn){
        $conn->send($data);
    }
}
// 当客户端断开时，广播给所有客户端
function handle_close($connection)
{
    global $text_worker;
    foreach($text_worker->connections as $conn){
        $conn->send("user[{$connection->uid}] logout");
    }
}
// 创建一个文本协议的Worker监听2347接口
$text_worker = new Worker("websocket://0.0.0.0:2347");
// 只启动1个进程，这样方便客户端之间传输数据
$text_worker->count = 1;
$text_worker->onConnect = 'handle_connection';
$text_worker->onMessage = 'handle_message';
$text_worker->onClose = 'handle_close';
Worker::runAll();

3.HTML和JS代码

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8">
    <title>IM</title>
    <script src="jquery.js"></script>
</head>
<body>
<!--登录界面-->
<div class="login">
    <input id="name" type="text" placeholder="创建昵称，加入聊天室">
    <button id="enter">进入</button>
</div>
<!--聊天界面-->
<div class="inputbox">
    <div class="box1">
        <div class="phone"></div>
    </div>
    <div class="box2">
        <input id="socket_text" type="text">
        <button id="socket_send">发送</button>
    </div>
</div>
<script>
    //创建一个socket应用    new WebSocket('ws://127.0.0.1:2347');
    //方法：send() 发送消息  close() 关闭websocket应用
    //事件：onopen 打开socket时   onmessage 接收到消息时   onclose socket应用关闭时  onerror 发生错误时
    //课程目标：制作一个WEB版IM沟通工具
    var $userInfo = {       //用户信息的载体
        "username":"",
        "content":"",
        "issys":0,
    };
    //登录、创建昵称
    $('#enter').on('click',function(){
        //收集用户名
        $userInfo.username = $('#name').val();
        if($userInfo.username == ''){
            alert('用户名或者昵称不能为空');
            return false;
        }
        //进入聊天界面
        $('.login').hide();
        $('.inputbox').show();
        //发送消息
        var socket = new  WebSocket('ws://127.0.0.1:2347');
        //打开socket应用  ，  同时发送一条用户登录的广播消息
        socket.onopen = function(){
            $userInfo.issys = 1;//标记为系统消息
            socket.send(JSON.stringify($userInfo));
        };
        //处理接收到的消息
        socket.onmessage = function(event){
            //返回的消息内容在事件对象（event）下的 data属性里
            var $data = JSON.parse(event.data)
            if($data.issys){
                $('.phone').append('<div class="sys"><p>系统消息：'+$data.username+'上线了。</p></div>');
            }else{
                if($userInfo.username!=$data.username){
                    $('.phone').append('<div class="info left"><div class="name">'+$data.username+'</div><div class="text">'+$data.content+'</div></div>');
                }
            }
        };
        //点击消息发送按钮 向其他用户发送信息
        $('#socket_send').on('click',function(){
            $userInfo.issys = 0;   

            $userInfo.content = $('#socket_text').val();

            $('.phone').append('<div class="info right"><div class="name">'+$userInfo.username+'</div><div class="text">'+$userInfo.content+'</div></div>');

            socket.send(JSON.stringify($userInfo));

            $('#socket_text').val('');
        });
        //如何显示在线成员？？？
    });
</script>
</body>
</html>

4.CSS样式

<style>
        body{
            background-color: #ccc;
        }
        .box1{
            width:400px;
            border:1px solid #ddd;
            padding:10px;
            height:600px;
            background-color: #fff;
            margin:auto;
            overflow: auto;
        }
        .phone{
            width:100%;
            overflow: hidden;
            word-break: break-all;
        }
        .info{
            padding:10px 0;
            overflow: hidden;
        }
        .name{
            clear: both;
            color:#ddd;
        }
        .text{
            clear:both;
            padding:5px;
            border-radius: 5px;
        }
        .left .name,.left .text{
            float:left;
        }
        .right .name,.right .text{
            float:right;
        }
        .left .text{
            background-color: #89cff0;
            color:#fff;
        }
        .right .text{
            background-color: #71A32A;
            color:#fff;
        }
        .sys{
            clear: both;
            text-align: center;
            padding:30px 0 15px;
        }
        .sys p{
            display: inline-block;
            padding:0;
            margin:0;
            font-size:14px;
            color:#fff;
            background-color: #ccc;
            padding:2px 10px;
            border-radius: 2px;
            text-align: center;
        }
        .box2{
            width:400px;
            margin:10px auto;
            background-color:#fff;
            padding:10px;
            border:1px solid #ddd;
        }
        input{
            font-size:14px;
            padding:5px;
            width:300px;
            outline: none;
            height:30px;
        }
        button{
            width:80px;
            font-size:14px;
            height:40px;
        }
        .inputbox{
            display: none;
        }
        .login{
            text-align: center;
            margin-top:250px;
        }
    </style>

本文链接：https://www.23thi.com/212.html

除非特殊声明，本站文章均为原创，转载请务必保留本文链接

© 允许规范转载
我 秦始皇 打钱