<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>与{{$to->name}}的对话</title> <script type="text/javascript" src="{{asset('js')}}/swfobject.js"></script> <script type="text/javascript" src="{{asset('js')}}/web_socket.js"></script> <script type="text/javascript" src="{{asset('js')}}/jquery.min.js"></script> <link href="{{asset('css')}}/jquery-sinaEmotion-2.1.0.min.css"> <link href="{{asset('css')}}/bootstrap.min.css"> <link href="{{asset('css')}}/style.css"> <script type="text/javascript" src="{{asset('js')}}/jquery-sinaEmotion-2.1.0.min.js"></script> {{--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>--}} </head> <style> #sinaEmotion { z-index: 999; width: 373px; padding: 10px; display: none; font-size: 12px; background: #fff; overflow: hidden; position: absolute; border: 1px solid #e8e8e8; top: 100px; left: 542.5px; } </style> <body> <div> <div> {{--对话窗口头部--}} <div> <div> <img src="https://www.jb51.net/{{$to->heading}}"> </div> <div> {{$to->name}} </div> </div> {{--//对话窗口内容--}} <div> {{--对方的头像与文字--}} {{--<div>--}} {{--<div>--}} {{--<img src="https://www.jb51.net/{{$to->heading}}">--}} {{--</div>--}} {{--<div >dsadsadsadsadsa</div>--}} {{--</div>--}} {{--我的头像与文字--}} {{--<div style= "min-height:50px;margin-top: 10px;">--}} {{--<div>--}} {{--<img src="https://www.jb51.net/{{$from->heading}}">--}} {{--</div>--}} {{--<div >dsadsadsadsadsa</div>--}} {{--</div>--}} </div> {{--对话发送窗口--}} <form onsubmit="return onSubmit(); return false;"> <input type="hidden" value="{{$to->id}}"> <input type="hidden" value="{{$from->id}}"> <input type="hidden" value="{{$room}}"> <input type="hidden" value="{{$tag}}"> <textarea></textarea> <div> <input type="button" value="表情" /> <button type="submit">发表</button> </div> </form> 房间号{{$room}} </div> </div> </body> </html> <script type="text/javascript"> if (typeof console == "undefined") { this.console = { log: function (msg) { } };} // 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明 WEB_SOCKET_SWF_LOCATION = "/swf/WebSocketMain.swf"; // 开启flash的websocket debug WEB_SOCKET_DEBUG = true; var ws, name, client_list={}; var to_client_id=""; // 连接服务端初始化函数 function connect() { // 创建websocket 届时可以替换为对应的服务器地址 ws = new WebSocket("ws://"+document.domain+":7272"); // 当socket连接打开时，输入用户名 ws.onopen = onopen; // 当有消息时根据消息类型显示不同信息 ws.onmessage = onmessage; //当连接丢失时，调用连接方法尝试重新连接 ws.onclose = function() { console.log("连接关闭，定时重连"); connect(); }; //当操作报错时，返回异常错误 ws.onerror = function() { console.log("出现错误"); }; //发送ajax获取当前房间的通话记录 $.post("/get_record", { "room":"{{$room}}" }, function(msg){ $.each(msg,function (v,k) { console.log(k); //判断 if(k.tag!="{{$tag}}"){ $(".content").append( '<div>' + '<div>'+ '<img src="https://www.jb51.net/{{$to->heading}}">'+ '</div>'+ '<div >'+k.content+'</div>'+ '<div>' ).parseEmotion(); }else{ $(".content").append( '<div>' + '<div>'+ '<img src="https://www.jb51.net/{{$from->heading}}">'+ '</div>'+ '<div >'+k.content+'</div>'+ '<div>' ).parseEmotion(); } }) }); } // 连接建立时发送登录信息 function onopen() { var login_data='{"type":"login","client_name":"{{$from->name}}","room_id":"{{$room}}","to":"{{$to->id}}","from":"{{$from->id}}","tag":"{{$tag}}"}'; ws.send(login_data); console.log('登录成功') } // 服务端发来消息时 function onmessage(e) { var data = JSON.parse(e.data); switch(data['type']){ // 服务端ping客户端心跳 case 'ping': ws.send('{"type":"pong"}'); break; // 登录 更新用户列表 case 'login': //讲需要的发送ID保存到本地to_client_id变量中 for(var p in data['client_list']){ to_client_id=p; } console.log(to_client_id); break; // 发言 case 'say': console.log(data); say(data['from_client_id'], data['from_client_name'], data['content'], data['time']); break; // 用户退出 更新用户列表 case 'logout': console.log(data); break; case 'init': //此处可以发送ajax用于绑定不同的用户ID和client console.log(data); break; } } // 提交对话 function onSubmit() { //先检查当前的对话是否超过20条记录数 var count=true; //发送ajax获取当前房间的通话记录 $.ajax({ url: "/check_count", type: "post", async:false, // cache: false, // contentType: false, // processData: false, data:{ 'room':"1", }, success: function (msg) { if(msg>10){ alert('当前的对话已经超过次数，请购买对应服务') count=false; } } }); if(count){ var neirong=$("#textarea").val().replace(/"/g, '\\"').replace(/\n/g,'\\n').replace(/\r/g, '\\r'); //ajax先把对应的内容发送到后台录入,回调成功后才把信息发送 var fm=$("#ajaxfrom")[0]; var formData = new FormData(fm); $.ajax({ url: "/record", type: "post", cache: false, contentType: false, processData: false, data: formData, beforeSend:function(){ }, success: function (msg) { if(msg.code=="0"){ ws.send('{"type":"say","to_client_id":"all","to_client_name":"{{$to->name}}","content":"'+neirong+'"}'); //清空文本框内容 $("#textarea").val(""); //强制定位光标 $("#textarea").focus(); }else{ } } }); } return false; } // 发言 function say(from_client_id, from_client_name, content, time){ //判断当前的用户名称与发送消息的名称是否一致 if( "{{$from->name}}" == from_client_name){ $(".content").append( '<div>' + '<div>'+ '<img src="https://www.jb51.net/{{$from->heading}}">'+ '</div>'+ '<div >'+content+'</div>'+ '<div>' ).parseEmotion(); }else{ $(".content").append( '<div>' + '<div>'+ '<img src="https://www.jb51.net/{{$to->heading}}">'+ '</div>'+ '<div >'+content+'</div>'+ '<div>' ).parseEmotion(); } // $("#dialog").append('<div><img src="http://lorempixel.com/38/38/?'+from_client_id+'" /> '+from_client_name+' <br> '+time+'<div></div><p>'+content+'</p> </div>').parseEmotion(); } $(function(){ //全局用户ID select_client_id = 'all'; //如果发送的用户有变化则对应的用户ID进行替换 $("#client_list").change(function(){ select_client_id = $("#client_list option:selected").attr("value"); }); //表情选择 $('.face').click(function(event){ $(this).sinaEmotion(); event.stopPropagation(); }); }); // document.write('<meta content="width=device-width,initial-scale=1">'); $("textarea").on("keydown", function(e) { //按enter键自动提交 if(e.keyCode === 13 && !e.ctrlKey) { e.preventDefault(); $('form').submit(); return false; } // 按ctrl+enter组合键换行 if(e.keyCode === 13 && e.ctrlKey) { $(this).val(function(i,val){ return val + "\n"; }); } }); </script>