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
除非特殊声明,本站文章均为原创,转载请务必保留本文链接