php+webSoket实现聊天室示例代码（附源码）

php

527 浏览量更新于2023-06-01 评论 2 收藏 82KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

php+webSoket实现聊天室示例代码（附源码）实现聊天室示例代码（附源码）

最近在公司利用直播间搭建一个图文直播间时正好要用到chatsever，研究了一下html5的websocket 实现了双向通信，根据前人的经验折腾了几天弄了个聊天室，实现了

发送图片，发送QQ表情，群聊私聊等功能，特地分享给各位新手参考学习，大牛可以忽略。

前端：client.html

<!doctype html>

<html>

<head>

<title>HTML5 websocket 网页聊天室 javascript php</title>

body,p{margin:0px; padding:0px; font-size:14px; color:#333; font-family:Arial, Helvetica, sans-serif;}

#ltian,.rin{width:98%; margin:5px auto;}

#ltian{border:1px #ccc solid;overflow-y:auto; overflow-x:hidden; position:relative;}

#ct{margin-right:111px; height:100%;overflow-y:auto;overflow-x: hidden;}

#us{width:110px; overflow-y:auto; overflow-x:hidden; float:right; border-left:1px #ccc solid; height:100%; background-color:#F1F1F1;}

#us p{padding:3px 5px; color:#08C; line-height:20px; height:20px; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

#us p:hover,#us p:active,#us p.ck{background-color:#069; color:#FFF;}

#us p.my:hover,#us p.my:active,#us p.my{color:#333;background-color:transparent;}

button{float:right; width:80px; height:35px; font-size:18px;}

input{width:100%; height:30px; padding:2px; line-height:20px; outline:none; border:solid 1px #CCC;}

.rin p{margin-right:160px;}

.rin span{float:right; padding:6px 5px 0px 5px; position:relative;}

.rin span img{margin:0px 3px; cursor:pointer;}

.rin span form{position:absolute; width:25px; height:25px; overflow:hidden; opacity:0; top:5px; right:5px;}

.rin span input{width:180px; height:25px; margin-left:-160px; cursor:pointer}

#ct p{padding:5px; line-height:20px;}

#ct a{color:#069; cursor:pointer;}

#ct span{color:#999; margin-right:10px;}

.c2{color:#999;}

.c3{background-color:#DBE9EC; padding:5px;}

.qp{position:absolute; font-size:12px; color:#666; top:5px; right:130px; text-decoration:none; color:#069;}

#ems{position:absolute; z-index:5; display:none; top:0px; left:0px; max-width:230px; background-color:#F1F1F1; border:solid 1px #CCC; padding:5px;}

#ems img{width:44px; height:44px; border:solid 1px #FFF; cursor:pointer;}

#ems img:hover,#ems img:active{border-color:#A4B7E3;}

#ems a{color:#069; border-radius:2px; display:inline-block; margin:2px 5px; padding:1px 8px; text-decoration:none; background-color:#D5DFFD;}

#ems a:hover,#ems a:active,#ems a.ck{color:#FFF; background-color:#069;}

.tc{text-align:center; margin-top:5px;}

</style>

</head>

<body>

</div>

<span><img src="http://www.yxsss.com/ui/sk/t.png" title="表情" id="imgbq"><img src="http://www.yxsss.com/ui/sk/e.png" title="上传图片"><form><input type="file"

title="上传图片" id="upimg"></form></span>

</div>

if(typeof(WebSocket)=='undefined'){

alert('你的浏览器不支持 WebSocket ，推荐使用Google Chrome 或者 Mozilla Firefox');

}

</script>

(function(){

var key='all',mkey;

var users={};

var url='ws://127.0.0.1:8000';

var so=false,n=false;

var lus=A.$('us'),lct=A.$('ct');

function st(){

var Arr1 = ["聪明的","狡猾的","可爱的","美丽的","狡猾的","善良的","帅气的","逗比的"];

var Arr2 = ["大灰狼","小白兔","母老虎","外星人","皮卡丘","HelloKitty","吴亦凡","薛之谦"];

var ran1 = Math.floor(Math.random() * Arr1.length + 1)-1;

var ran2 = Math.floor(Math.random() * Arr2.length + 1)-1;

var n=Arr1[ran1]+Arr2[ran2];

//以上五行是用来随机生成用户昵称的方法，参考一下，如果想自定义用户名可以将以上五行注释，然后以下两行取消注释

//n=prompt('请给自己取一个霸气的名字：');

//n=n.substr(0,16);

//console.log(n);

if(!n){

return ;

}

so=new WebSocket(url);

so.onopen=function(){

if(so.readyState==1){

so.send('type=add&ming='+n);

}

so.onclose=function(){

so=false;

lct.appendChild(A.$$('<p class="c2">退出聊天室</p>'));

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余7页未读，立即下载

weixin_38713039

粉丝: 6
资源: 948

会员权益专享

php+webSoket实现聊天室示例代码（附源码）

评论0

会员权益专享

最新资源

php+webSoket实现聊天室示例代码（附源码）

评论0

安卓android+WebSocket实现简易QQ聊天室

springboot+websocket实现担任聊天 代码

PHP用swoole+websocket和redis实现web一对一聊天

Vue3+WebSocket 实时聊天框架

Vue+WebSocket 实现页面实时刷新长连接

springboot+websocket+stomp+rabbitmq 实现单聊群聊

websocket实现聊天室

netty+websocket实现心跳和断线重连

django+websocket实现数据自动推送

在线客服聊管理系统springboot+websocket 源码

websocket+redis+springboot在线聊天室

微信小程序websocket聊天室的实现示例代码

WebSocket 消息推送示例代码

springboot websocket聊天室

SpringBoot整合ActiveMQ+websocket.docx

nodejs和websocket聊天室代码

vue+springboot+security+websocket+token

会员权益专享

最新资源

springboot+websocket实现担任聊天代码