websocket 类也是在网上找到的。 修改后可以用来创建多房间聊天室。可以发送图片表情，图片，及文字。
分享的代码，已经测试。可正常运行
HTML 端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<title>直播课程</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/zhibo.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
</head>
<body class="scope">
<div style="width: 100%; height:250px;">
<script type="text/javascript" src="player/sewise.player.min.js"></script>
<script type="text/javascript">
var videourl='视屏播放地址不用写';
SewisePlayer.setup({
server: "vod",
type: "m3u8",
autostart: "true",
videourl: videourl,
skin: "vodWhite",
title: "三年级预备课程一",
claritybutton: "disable",
lang: "zh_CN"
});
</script>
</div>
<div class="log comment" id="log">
<div class="luck">
<div class="user"><img src="img/user.png"></div>
<div class="content1"><span class="luckyP">奕佚奕佚</span>：<span class="yuanwang">我是用户1我是用是用户1我是用户1我是用户1我是用户1</span></div>
</div>
<div class="luck">
<div class="user"><img src="img/user.png"></div>
<div class="content1"><span class="luckyP">莫寒</span>：<span class="yuanwang"><img class="chat_pic" src="img/pic.jpg" alt=""></span></div>
</div>
<div class="luck">
<div class="user"><img src="img/user.png"></div>
<div class="content1"><span class="luckyP">奕佚奕佚</span>：<span class="yuanwang">我是用户1我是用是用户1我是用户1我是用户1我是用户1</span></div>
</div>
<div class="luck">
<div class="user"><img src="img/user.png"></div>
<div class="content1"><span class="luckyP">奕佚奕佚</span>：<span class="yuanwang">我是用户1我是用是用户1我是用户1我是用户1我是用户1</span></div>
</div>
<div class="luck">
<div class="user"><img src="img/user.png"></div>
<div class="content1"><span class="luckyP">莫寒</span>：<span class="yuanwang"><img class="chat_pic" src="img/150599173575244039.jpg" alt=""></span></div>
</div>
<div class="luck">
<div class="user"><img src="img/user.png"></div>
<div class="content1"><span class="luckyP">奕佚奕佚</span>：<span class="yuanwang">我是用户1我是用是用户1我是用户1我是用户1我是用户1</span></div>
</div>
</div>
<div class="sendCon">
<p class="info">
<span class="emoji"> <input type="button" value="：)"></span>
<span class="placeholder"><img src="img/pic.jpg" alt=""><input type="file" id="file_img" onchange="preImg(this.id,'yulan_img')"></span>
<span class="text"><input type="text" id="text" placeholder=""></span>
<span class="send"><input type="button" class="btn" value="发送" onclick="sendText()"></span>
</p>
<ul class="emojiCon"></ul>
</div>
<script>
var serverUrl="http://192.168.3.240"; //图片服务器的地址ip
var url="ws://你自已访问的ip:端口(8000)";
function link(){
socket=new WebSocket(url);
socket.onopen=function(){
// alert('连接成功')
};
socket.onerror=function(errorEvent){
// alert('error');
}
socket.onmessage=function(msg){
setMsg(msg.data);
console.log(msg);
}
// socket.onclose=function(){setMsg('断开连接')}
}
function closeScoket(){
socket.close();
socket=null;
}
//向页面中实时更新消息数据
function setMsg(var1){
var obj=JSON.parse(var1);
if(obj.type==1){
$('.log').append('<div class="luck">'
+'<div class="user"><img src="img/user.png"></div>'
+'<div class="content1"><span class="luckyP">奕佚奕佚</span>：<span class="yuanwang">'+obj.msg+'</span></div></div>' );
add();
}else{
var img = new Image();
img.src=obj.msg;
img.onload=function(){
var isPic='';
//width>30 表示不是表情包图片
if(img.width>30){
isPic='<img class="chat_pic" src="'+obj.msg+'" alt="">';
}else{
isPic='<img class="chat_pic1" src="'+obj.msg+'" alt="">'
}
$('.log').append('<div class="luck">'
+'<div class="user"><img src="img/user.png"></div>'
+'<div class="content1"><span class="luckyP">奕佚奕佚</span>：<span class="yuanwang">'+isPic+'</span></div></div>' );
add();
}
}
}
var arr=[1,2,3,4];
//发送文字
function sendText(id){
var json;
if($('#'+id).attr('src')==undefined){
json=JSON.stringify({'room':arr[1],'type':'1','msg':$('#text').val()});
if($('#text').val()==""){
$('body').append(pop("消息不能为空"));
return;
}
}else{
json=JSON.stringify({'room':arr[1],'type':'2','msg':$('#'+id).attr('src')});
$('.emojiCon').css('display','none');
}
socket.send(json);
$('#text').val('');
}
//发送图片
function sendPic(){
$.ajax({
url:''+serverUrl+'/test/Home/index/base64_decode',
type:'post',
data:{'msg':$('#yulan_img').attr('src')},
dataType:'html',
success:function(data){
console.log(data);
var json=JSON.stringify({'room':arr[3],'type':'2','msg':data});
socket.send(json);
$('.mask').remove();
},
error:function(event){
$('body').append(pop('服务器开小差啦~'))
}
})
}
//让讨论区的滚动条始终在底部 让用户立马看到自己的消息
function add(){
var div = document.getElementById('log');
div.scrollTop = div.scrollHeight;
}
//加载表情包
function afterLoad(){
var html='';
for(var i=0;i<91;i++){
html+='<li><img id="emoji_'+(i+1)+'" onclick="sendText(id)" src="'+serverUrl+'/test/Public/img/qq/'+(i+1)+'.gif" alt=""></li>';
}
$('.emojiCon').html(html);
}
//图片预览
function preImg(sourceId, targetId) {
if (typeof FileReader === 'undefined') {
alert('Your browser does not support FileReader...');
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var img = document.getElementById(targetId);
img.src = this.result;
var w=img.width;
var h=img.height;
var winW=$(window).width();
var winH=$(window).height();
var marginTop=parseInt((winH-40-h)/2);
var marginLeft=parseInt((winW-w
)/2);
if(w/h>1.2){
$(img).css('width',winW).css('margin-top',marginTop);
alert("marginTop:"+marginTop);
}else if(h/w>2){//超长图的时候 滚动条显示
$('.over_pic').css('height',winH-40).css('overflow','scroll');
$(img).css('width',winW);
}else{//竖图的时候
$(img).css('height',winH-40).css('margin-left',marginLeft);
alert("marginLeft:"+marginLeft);
}
}
reader.readAsDataURL(document.getElementById(sourceId).files[0]);
$('body').append('<div class="mask scope"><div class="over_pic"><img id="yulan_img" src="" alt=""></div>'
+'<p><button class="sure" onclick="sendPic()">确认</button></p></div>');
}
$(function(){
link();
afterLoad();
add();
$('.log').css('height',$(window).height()*0.65+'px');
$('.emoji').click(function(){
$('.emojiCon').show();
})
})
</script>
</body>
</html>
CSS 前端代码 bass
@charset "utf-8";
/* 禁用iPhone中Safari的字号自动调整 */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family:"微软雅黑",Arial,sans-serif;
}
/* 去除iPhone中默认的input样式 */
input{/* -webkit-appearance:none; */ resize: none;}
/* 取消链接高亮 */
body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,input,textarea,select,p,dl,dt,dd,a,img,button,form,table,th,tr,td,tbody,article,
aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section{
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
/* 设置HTML5元素为块 */
article, aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section {
display: block;
}
/* 图片自适应 */
img {width: 100%;height: auto;width:auto\9; /* ie8 */
-ms-interpolation-mode:bicubic;/*为了照顾ie图片缩放失真*/}
*:focus {outline:none;}
/* 清零 */
body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,input,textarea,select,p,dl,dt,dd,
a,img,button,form,table,th,tr,td,tbody,article,
aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section
{
margin:0;
padding:0;
border:none;
}
em,i{font-style:normal;}
strong{font-weight: normal;}
.clearfix:after{content:""; display:block; visibility:hidden; height:0; clear:both;}
.clearfix{zoom:1;}
a{text-decoration:none; color:#969696;}
a:hover{ text-decoration:none;}
ul,ol,li{list-style:none;}
fieldset,img{border: none;}
q:before,q:after {content:"";}
input:password {ime-mode:disabled;}
*{box-sizing:border-box;}
.scope{min-width:320px; max-width:750px; margin: 0 auto;}
*{
margin: 0;
padding: 0;
}
@media screen and (max-width: 750px){
html{font-size:30px;}
}
@media screen and (min-width:640px) and (max-width:749px){
html{font-size:25px; }
}
@media screen and (min-width:480px) and (max-width:639px){
html{font-size:20px; }
}
@media screen and (min-width:320px) and (max-width:479px){
html{font-size:15px; }
}
/*body{font-size:62.5%;}*/
fieldset,img{border:0}
a{text-decoration:none;color:#000;outline:none}
li{list-style:none}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
input,button,textarea,select,optgroup,option{
font-family:inherit;font-size:inherit;
font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
.clear:after{
display:block;
content:"clear";
height:0;
clear:both;
visibility:hidden;
}
.clear{zoom:1;}
CSS 前端代码 zhibo
.comment{
overflow: scroll;
border:1px solid red;
padding:2%;
}
.luck{
padding: 10px 0 0 0;
overflow:hidden;
}
.luckyP{
color:#44c6dd;
}
.chat_pic{
width:40%;
display:inline-block;
vertical-align: top;
}
.chat_pic1{
width:10%;
vertical-align: middle;
}
.user img{
width:40%;
}
.user,.content1{
float:left;
}
.user{
width:15%;
text-align: center;
vertical-align: middle;
}
.content1{
width:85%;
line-height:25px;
}
.sendCon{
position:fixed;
bottom:0;
left:0;
right:0;
padding:2%;
background:#fff;
border:1px solid #ddd;
min-width:320px;
max-width:750px;
margin:0 auto;
}
.info span{
display:inline-block;
}
.placeholder{
width:15%;
position:relative;
text-align: center;
vertical-align: middle;
}
input[type="file"]{
width:80%;
position:absolute;
left:2%;
top:2%;
opacity:0;
}
.placeholder img{
width:65%;
}
.emoji{
width:10%;
text-align: center;
/*vertical-align: middle;*/
/*border:1px solid red;*/
}
.emoji input{
width:100%;
padding:8% 2%;
border:1px solid #ddd;
background:#fff;
}
/*.emoji img{
width:80%;
border:1px solid blue;
vertical-align: middle;
}*/
.text{
width:55%;
}
#text{
width:100%;
border:1px solid #ddd;
padding:2%;
}
.send{
width:15%;
}
.btn{
width:100%;
background:#86e2fd;
color:#fff;
padding:9% 2%;
vertical-align: middle;
}
.mask{
background:rgba(0,0,0,0.9);
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
/*display:none;*/
}
.sure{
background:#19ad17;
color:#fff;
padding:10px;
}
.mask p{
text-align: right;
position:absolute;
bottom:0;
left:0;
right:0;
height:40px;
vertical-align: middle;
}
.over_pic img{
display:block;
}
/*表情包div*/
.emojiCon{
position:absolute;
bottom:0;
left:0;
display:none;
background:#fff;
}
.emojiCon li{
border:1px solid #ddd;
float:left;
width:8.33%;
}
php 服务端代码 server.php
<?php
include 'websocket.class.php';
$config=array(
'address'=>'你自已ip地址', //注意事 项 linux下云服务器，用ifconfig 查看自已的内网ip 外网访问的ip 是用写在html那块的
'port'=>'8000',
'event'=>'WSevent',//回调函数的函数名
'log'=>true,
);
$websocket = new websocket($config);
$websocket->run();
function WSevent($type,$event){
global $websocket;
if('in'==$type){
$websocket->log('客户进入id:'.$event['k']);
}elseif('out'==$type){
$websocket->log('客户退出id:'.$event['k']);
}elseif('msg'==$type){
$websocket->log($event['k'].'消息:'.$event['msg']);
roboot($event['sign'],$event['msg']);
}
}
function roboot($sign,$t){
global $websocket;
$msg_arr = json_decode($t,true);
foreach($websocket->users as $k =>&$v){
if(empty($v['room'])){
$v['room']=$msg_arr['room'];
}
if($v['room'] ==$msg_arr['room']){
$websocket->idwrite($k,$t);
}
}
}
php 服务羰代码 websocket.class.php
<?php
/*
创建类websocket($config);
$config结构:
$config=array(
'address'=>'192.168.0.200',//绑定地址
'port'=>'8000',//绑定端口
'event'=>'WSevent',//回调函数的函数名
'log'=>true,//命令行显示记录
);
回调函数返回数据格式
function WSevent($type,$event)
$type字符串 事件类型有以下三种
in 客户端进入
out 客户端断开
msg 客户端消息到达
均为小写
$event 数组
$event['k']内置用户列表的userid;
$event['sign']客户标示
$event['msg']收到的消息 $type='msg'时才有该信息
方法:
run()运行
search(标示)遍历取得该标示的id
close(标示)断开连接
write(标示,信息)推送信息
idwrite(id,信息)推送信息
属性:
$users 客户列表
结构:
$users=array(
[用户id]=>array('socket'=>[标示],'hand'=[是否握手-布尔值]),
[用户id]=>arr.....
)
*/
class websocket{
public $log;
public $event;
public $signets;
public $users;
public $master;
public function __construct($config){
if (substr(php_sapi_name(), 0, 3) !== 'cli') {
die("请通过命令行模式运行!");
}
error_reporting(E_ALL);
set_time_limit(0);
ob_implicit_flush();
$this->event = $config['event'];
$this->log = $config['log'];
$this->master=$this->WebSocket($config['address'], $config['port']);
$this->sockets=array('s'=>$this->master);
}
function WebSocket($address,$port){
$server = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
socket_set_option($server, SOL_SOCKET, SO_REUSEADDR, 1);
socket_bind($server, $address, $port);
socket_listen($server);
$this->log('开始监听: '.$address.' : '.$port);
return $server;
}
function run(){
while(true){
$changes=$this->sockets;
@socket_select($changes,$write=NULL,$except=NULL,NULL);
foreach($changes as $sign){
if($sign==$this->master){
$client=socket_accept($this->master);
$this->sockets[]=$client;
$user = array(
'socket'=>$client,
'hand'=>false,
);
$this->users[] = $user;
$k=$this->search($client);
$eventreturn = array('k'=>$k,'sign'=>$sign);
$this->eventoutput('in',$eventreturn);
}else{
$len=socket_recv($sign,$buffer,2048,0);
$k=$this->search($sign);
$user=$this->users[$k];
if($len<7){
$this->close($sign);
$eventreturn = array('k'=>$k,'sign'=>$sign);
$this->eventoutput('out',$eventreturn);
continue;
}
if(!$this->users[$k]['hand']){//没有握手进行握手
$this->handshake($k,$buffer);
}else{
$buffer = $this->uncode($buffer);
$eventreturn = array('k'=>$k,'sign'=>$sign,'msg'=>$buffer);
$this->eventoutput('msg',$eventreturn);
}
}
}
}
}
function search($sign){//通过标示遍历获取id
foreach ($this->users as $k=>$v){
if($sign==$v['socket'])
return $k;
}
return false;
}
function close($sign){//通过标示断开连接
$k=array_search($sign, $this->sockets);
socket_close($sign);
unset($this->sockets[$k]);
unset($this->users[$k]);
}
function handshake($k,$buffer){
$buf = substr($buffer,strpos($buffer,'Sec-WebSocket-Key:')+18);
$key = trim(substr($buf,0,strpos($buf,"\r\n")));
$new_key = base64_encode(sha1($key."258EAFA5-E914-47DA-95CA-C5AB0DC85B11",true));
$new_message = "HTTP/1.1 101 Switching Protocols\r\n";
$new_message .= "Upgrade: websocket\r\n";
$new_message .= "Sec-WebSocket-Version: 13\r\n";
$new_message .= "Connection: Upgrade\r\n";
$new_message .= "Sec-WebSocket-Accept: " . $new_key . "\r\n\r\n";
socket_write($this->users[$k]['socket'],$new_message,strlen($new_message));
$this->users[$k]['hand']=true;
return true;
}
function uncode($str){
$mask = array();
$data = '';
$msg = unpack('H*',$str);
$head = substr($msg[1],0,2);
if (hexdec($head{1}) === 8) {
$data = false;
}else if (hexdec($head{1}) === 1){
$mask[] = hexdec(substr($msg[1],4,2));
$mask[] = hexdec(substr($msg[1],6,2));
$mask[] = hexdec(substr($msg[1],8,2));
$mask[] = hexdec(substr($msg[1],10,2));
$s = 12;
$e = strlen($msg[1])-2;
$n = 0;
for ($i=$s; $i<= $e; $i+= 2) {
$data .= chr($mask[$n%4]^hexdec(substr($msg[1],$i,2)));
$n++;
}
}
return $data;
}
function code($msg){
$msg = preg_replace(array('/\r$/','/\n$/','/\r\n$/',), '', $msg);
$frame = array();
$frame[0] = '81';
$len = strlen($msg);
$frame[1] = $len<16?'0'.dechex($len):dechex($len);
$frame[2] = $this->ord_hex($msg);
$data = implode('',$frame);
return pack("H*", $data);
}
function ord_hex($data) {
$msg = '';
$l = strlen($data);
for ($i= 0; $i<$l; $i++) {
$msg .= dechex(ord($data{$i}));
}
return $msg;
}
function idwrite($id,$t){//通过id推送信息
if(!$this->users[$id]['socket']){return false;}//没有这个标示
$t=$this->code($t);
return socket_write($this->users[$id]['socket'],$t,strlen($t));
}
function write($k,$t){//通过标示推送信息
$t=$this->code($t);
return socket_write($k,$t,strlen($t));
}
function eventoutput($type,$event){//事件回调
call_user_func($this->event,$type,$event);
}
function log($t){//控制台输出
if($this->log){
$t=$t."\r\n";
fwrite(STDOUT, iconv('utf-8','gbk//IGNORE',$t));
}
}
}
php 上传图片异步处理代码
$update_path = "Upload/";
$msg = $_POST['msg'];
$exe = str_replace('/', '.', strstr(strstr($msg, ';', TRUE), '/'));
$exe = $exe == '.jpeg' ? '.jpg' : $exe;
$tmp = base64_decode(substr(strstr($msg, ','), 1));
$path = $update_path . md5(time()) . $exe;
$res =file_put_contents($path, $tmp);
echo "http://".$_SERVER['SERVER_NAME']."/test/".$path;
window 下 打开dos 命令 找到php.exe 文件位置。用php.exe 执行 server.php 文件开启服务器监听。 php.exe server.php
打开html页面，点击链接，就可以链接websocket了。提示成功，便可以发送信息了。
注意事项目：linux 下 滥听端口时，注意服务器防火墙是否开启端口过滤。 Linux 有iptables firewall 两个防火墙软件件