- <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-
- equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewpor
- t" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-s
- cale=1,user-scalable=no" /><title>Chat</title><link rel="stylesheet" typ
- e="text/css" href="/static/liaotian/chat.css" /><script src="/static/liaotian/js/jquery.min.js"></script><script src="/static/liaotian/js/flexib
- le.js"></script></head><body>
- <header class="header">
- <a class="back" href="javascript:history.back()"></a>
- <h5 class="tit">在线聊天</h5>
- <a href=""><div class="right">退出</div></a>
- </header>
- <!-- 聊天内容 start-->
- <div class="message"> </div>
- <!-- 聊天内容 end-->
- <!-- 底部 start-->
- <div class="footer">
- <img id="setbtn" src="/static/liaotian/images/hua.png" alt="" />
- <img src="/static/liaotian/images/xiaolian.png" alt="" />
- <input type="text" id="msg" value="" maxlength="300">
- <p style="background: rgb(17, 79, 142);" id="sendBtn">发送</p>
- </div>
- <!-- 底部 end--></body></html><script src="http://apps.bdimg.com/lib
- s/jquery/2.1.4/jquery.min.js"></script><script src="https://cdn.bootcss.
- com/layer/3.1.0/layer.js"></script><script type="text/javascript">
- $(function () {
- var uid = 666;//当前用户 idvar token = 'abcdefg';//用户 token
- //判断浏览器是否支持 WebSocket
- var supportsWebSockets = 'WebSocket' in window || 'MozWebSocket' in w
- indow;
- if (supportsWebSockets) {
- //建立 WebSocket 连接(ip 地址换成自己主机 ip)
- var ws = new WebSocket("ws://127.0.0.1:9501?uid="+uid+"&token="+t
- oken);
- ws.onopen = function () {
- layer.msg('服务器连接成功',{shade:0.1,icon:1,time:600});
- };
- ws.onerror = function () {
- layer.msg('服务器连接失败',{shade:0.1,icon:2,time:600});
- };
- ws.onmessage = function (evt) {
- var data = $.parseJSON(evt.data);
- //错误提示
- if(data.status != 1){
- layer.alert(data.message,{icon:2});
- return;
- }
- //消息返回if (data.status==1 && data.data.message!='') {
- var html = "";
- if (data.data.uid == uid) {
- html += "<div style='word-break:break-all' class=\"sho
- w\"><div class=\"time\">"+data.data.post_time+"</div><div class=\"msg\">
- <img src=\""+data.data.head_img+"\" alt=\"\" /><p><i clas=\"msg_input\">
- </i>"+data.data.message+"</p></div></div>";
- }else{
- html += "<div style='word-break:break-all' class=\"sen
- d\"><div class=\"time\">"+data.data.post_time+"</div><div class=\"msg\">
- <img src=\""+data.data.head_img+"\" alt=\"\" /><p><i clas=\"msg_input\">
- </i>"+data.data.message+"</p></div></div>";
- }
- }
- $(".message").append(html);
- setTimeout(function () {
- ($('.message').children("div:last-child")[0]).scrollIntoV
- iew();//向上滚动
- },100);
- };
- ws.onclose = function (res) {
- };
- //按钮发送
- $("#sendBtn").click(function () {
- var contents = $("#msg").val().trim();if(contents == null || contents == ""){
- layer.msg('内容为空',{shade:0.1,icon:2,time:600});
- return false;
- }else{
- ws.send(contents);
- $("#msg").val("");
- }
- });
- //回车发送
- $("#msg").keydown(function (evel) {
- var that = $(this);
- if (evel.keyCode == 13) {
- evel.cancelBubble = true;
- evel.preventDefault();
- evel.stopPropagation();
- var contents = that.val().trim();
- if(contents == null || contents == ""){
- layer.msg('内容为空',{shade:0.1,icon:2,time:600});
- return false;
- }else{
- ws.send(contents);that.val("");
- }
- }
- });
- }else{
- layer.alert("您的浏览器不支持 WebSocket!");
- }
- });</script>