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

79 浏览量更新于2023-03-03 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实现聊天室示例代码（附源码）

PHP聊天室源代码

HTML5 websocket PHP_聊天室 2018

PHP聊天系统

使用WebSocket实现多人在线聊天室

构建基于Websocket的聊天室应用: 从前端到后端的实现

使用WebSocket实现实时聊天应用

实战项目：搭建简单的WebSocket聊天室

利用AJAX与WebSocket实现实时聊天应用的技术细节

springboot+vue+websocket实现聊天室代码实现

springboot+vue+websocket实现聊天室并持久化消息

springboot+vue+websocket实现在线聊天代码实现

uniapp+websocket实现聊天功能

springboot+websocket实现担任聊天 代码

java+uniapp+websocket实现创建房间，加入房间，移除房间

asp+ajax+WebSocket创建聊天

写一段SpringBoot + Vue + websocket实现的一对一聊天代码

springboot+vue+websocket实现实时聊天

springboot+vue+websocket实现单聊代码、存储历史消息

springboot+mqtt+websocket+rabbitmq实现消息推送代码

java websocket实现聊天室

会员权益专享

最新资源

springboot+websocket实现担任聊天代码