websocket

最新推荐文章于 2021-12-27 07:52:14 发布
最新推荐文章于 2021-12-27 07:52:14 发布
阅读量138 收藏
点赞数
分类专栏： js、jquery 文章标签： websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38273626/article/details/80257384
版权 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${currPatient.name}</title>
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">
<link href="${ctx}/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${ctx}/css/site.css">
<script src="${ctx}/js/jquery.min.js"></script>
<script src="${ctx}/js/bootstrap.min.js"></script>
<script src="${ctx}/js/site.js"></script>
<script src="${ctx}/js/jweixin-1.0.0.js"></script>
<script src="${ctx}/layer/layer.min.js"></script>
<script type="application/javascript">
$(function(){
    /* 自己 */
     var userid="120"
         var Chat = {};

         Chat.socket = null;  
         // 创建一个websocket实例  
         Chat.connect = (function(host) {  
             if ('WebSocket' in window) {  
                 Chat.socket = new WebSocket(host);  
             } else if ('MozWebSocket' in window) {  
                 Chat.socket = new MozWebSocket(host);  
             } else {  
                 Console.log('Console.log:你的浏览器不支持WebSocket');  
                 return;  
              }  
             Chat.socket.onopen = function(){  
                  //Console.log('Console.log:WebSocket链接打开');  
                  //按下回车键发送消息  
                  document.getElementById('chat').onkeydown = function(event) {  
                      if (event.keyCode == 13) {  
                          Chat.sendMessage();  
                      }  
                  };
                  document.getElementById('send').onclick = function(event) {  
                      Chat.sendMessage();
                  };
              };  
              Chat.socket.onclose = function () {  
                  document.getElementById('chat').onkeydown = null;  
                  Console.log('Console.log:WebSocket前端链接关闭');  
              };  
              Chat.socket.onmessage = function (message) {  
                  //Console.log(message.data); 
                  var sendMeId=message.data.substr(message.data.lastIndexOf("-")+1,message.data.length-1);
                  var sendMeContent=message.data.substr(0,message.data.lastIndexOf("-"));
                  if(sendMeId==userid){
                      showMeContent(sendMeContent, true); 
                  }else{
                      showYouContent(sendMeContent, true)
                  }

              };  
         });  
         Chat.initialize = function() {
             //链接地址选择聊天页面的URL    
             if (window.location.protocol == 'http:') {  
                 Chat.connect("ws://" + window.location.host + "/happy/websocket/"+userid);  
             } else {  
                 Chat.connect("wss://" + window.location.host + "/happy/websocket/"+userid);  
             }  
         };  
         //发送消息函数，后面动态添加了发送好友的唯一ID   
         Chat.sendMessage = (function() {  
             var fid = $("#happynessId").val();  
             var messageContain = document.getElementById('chat').value;  
             var message = messageContain +"-"+fid;  
             if(fid==""){  
                 alert("未选择发送消息的好友！");  
                 return;  
             }else{  
                 if (messageContain != "") { 
                     Chat.socket.send(message);  
                     document.getElementById('chat').value = '';  
                 }else{  
                     alert("发送消息不能为空！");  
                 }  
             }  
         });  
           var Console = {};  
          Console.log = (function(message) {  
              var console = document.getElementById('console');  
              var p = document.createElement('p');  
              p.style.wordWrap = 'break-word';  
              p.innerHTML = message;  
              console.appendChild(p);  
              console.scrollTop = console.scrollHeight;  
          });  
         //初始化函数  
          Chat.initialize();
          /* document.addEventListener("DOMContentLoaded", function() {  
              var noscripts = document.getElementsByClassName("noscript");  
              for (var i = 0; i < noscripts.length; i++) {  
                  noscripts[i].parentNode.removeChild(noscripts[i]);  
              }  
          }, false); */ 
          function showMeContent(msg, isScroll) {
                var docPortrait = $('#docPortrait').val();
                var _str = new Array();
                _str.push('<div class="me">');
                if (!docPortrait) {
                    _str.push('<img class="head-pic" src="img/1toux.png" alt="" style="width:40px;height:40px;border-radius: 50%;">');
                } else if (docPortrait.substring(0, 4) == "http") {
                    _str.push('<img class="head-pic" src=' + docPortrait + ' alt="" style="width:40px;height:40px;border-radius: 50%;">');
                } else {
                    _str.push('<img class="head-pic" src=' + docPortrait + ' alt="" style="width:40px;height:40px;border-radius: 50%;">');
                }
                _str.push('<p style="margin-right: 5em;max-width: 80%; word-break: break-word;">');
                _str.push(msg.createdTimeStr + ':<br>');
                if (msg.type == 1) {
                    _str.push(msg.content);
                } else if (msg.type == 2) {
                    _str.push('<img class="img-itemClick" pic-url="'+msg.content+'" src='+msg.content+' alt="" width="120" height="120">');
                } else if (msg.type == 3) {
                    _str.push('<img class="audio-itemClick" src="img/audio3.png" alt>');
                } else {
                    _str.push(msg);
                }
                _str.push('</p>');
                _str.push('</div>');
                if (isScroll) {
                    $('.content').append(_str.join(''));
                    scrollBottom();
                } else {
                    $('.content').prepend(_str.join(''));
                    scrollTop();
                }
            };

            function showYouContent(msg, isScroll) {
                var _str = new Array();
              var patPortrait = $('#patPortrait').val();
                _str.push('<div class="you">');
                if (!patPortrait) {
                    _str.push('<img class="head-pic" src="img/1toux.png" alt="" style="width:40px;height:40px;border-radius: 50%;">');
                } else if (patPortrait.substring(0, 4) == "http") {
                    _str.push('<img class="head-pic" src=' + patPortrait + ' alt="" style="width:40px;height:40px;border-radius: 50%;">');
                } else {
                    _str.push('<img class="head-pic" src=' + patPortrait + ' alt="" style="width:40px;height:40px;border-radius: 50%;">');
                }
                _str.push('<p style="margin-left: 5em;max-width: 80%; word-break: break-word;">');
                _str.push(msg.createdTimeStr + ':<br>');
                if (msg.type == 1) {
                    _str.push(msg.content);
                } else if (msg.type == 2) {
                    _str.push('<img class="img-itemClick" pic-url="' + msg.picSrc + '" src=' + msg.picSrc + ' alt="" width="120" height="120">');
                } else if (msg.type == 3) {
                    _str.push('<img class="audio-itemClick" src="img/audio3.png" alt>');
                } else {
                    _str.push(msg);
                }
                _str.push('</p>');
                _str.push('</div>');
                if (isScroll) {
                    $('.content').append(_str.join(''));
                    scrollBottom();
                } else {
                    $('.content').prepend(_str.join(''));
                    scrollTop();
                }
            };
            function scrollBottom(){
                $('html, body, .content').animate({scrollTop: $(document).height()}, 300); 
            }

            function scrollTop(){
                $('html, body, .content').animate({scrollTop:0}); 
            }
})

 </script>

<%-- <script type="text/javascript">
    //自己的ID
    //var userid =document.getElementById('happynessId').value;
    var userid ="120";
     var websocket = null;
     //判断当前浏览器是否支持WebSocket
     if ('WebSocket' in window) {
         websocket = new WebSocket("ws://localhost:8080/happy/websocket/"+userid);
     }
     else {
         alert('当前浏览器 Not support websocket')
     }
     //连接发生错误的回调方法
     websocket.onerror = function () {
         setMessageInnerHTML("WebSocket连接发生错误");
     };

     //连接成功建立的回调方法
     websocket.onopen = function () {
         setMessageInnerHTML("WebSocket连接成功");
     }

     //接收到消息的回调方法
     websocket.onmessage = function (event) {
         setMessageInnerHTML(event.data);
     }

     //连接关闭的回调方法
     websocket.onclose = function () {
         setMessageInnerHTML("WebSocket连接关闭");
     }

     //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
     window.onbeforeunload = function () {
         closeWebSocket();
     }

     //将消息显示在网页上
     function setMessageInnerHTML(innerHTML) {
         document.getElementById('message').innerHTML += innerHTML + '<br/>';
     }

     //关闭WebSocket连接
     function closeWebSocket() {
         alert("关闭");
         websocket.close();
     }

     //发送消息
     function send() {
         //发送人的ID
         var fid =document.getElementById('happynessId').value;
         var messageContain = document.getElementById('chat').value;  
         var message = messageContain +"-"+fid;  
         if(fid==""){  
             alert("未选择发送消息的好友！");  
             return;  
         }else{  
             if (messageContain != "") { 
                 websocket.send(message);
                 document.getElementById('chat').value = '';  
             }else{  
                 alert("发送消息不能为空！");  
             }  
         }
         /* var message = document.getElementById('text').value;
         websocket.send(message); */
     }
 </script> --%>
</head>
<!-- <body class="normal-ky-bg">
<input name="happynessId" id="happynessId" type="hidden" value="110" />
   <div>
    <p>
        <input type="text" placeholder="输入" id="chat"/>
    </p>
    <div id="console-container">
        <div id="message"></div>
    </div>
    <button onclick="send()">发送</button>
</div> -->
<body class="normal-ky-bg">
    <!--别人id  -->
    <input name="happynessId" id="happynessId" type="hidden" value="110" />
    <p></p>
    <div id="console"></div>
    <div class="container no-padding-bm">
        <div class="col-xs-12 talk">

            <div class="space12"></div>
            <div class="text-center">
                <span id="load_more" class="ky-label gray" onclick="viewMore()">查看更多消息</span>
            </div>
            <div class="content"></div>

            <div class="send-area" id="send-area">
                <div class="fixed">
                    <div style="width: 10%; display: inline; float: left;">
                        <span><img id="record" alt="" src="img/sd.png"></span>
                    </div>
                    <div style="width: 50%; display: inline; float: left;">
                        <input class="form-control" id="chat" type="text" />
                    </div>
                    <div style="width: 10%; display: inline;">
                        <button class="btn btn-default ac-btn" id="send" type="button">发送</button>
                    </div>

                    <div style="width: 10%; display: inline;">
                        <button class="btn btn-default ac-btn" id="choice" type="button"
                            onclick="my()">图片</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="wxRecordPlugin"></div>
</body>
</html>
程序猿_小王
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebSocket
qq_54773998的博客
03-31 17万+
目录 一，什么是websocket 二，websocket的原理 三，websocket与http的关系 四，websocket解决的问题 1.http存在的问题 2.long poll(长轮询) 3.Ajax轮询 4.websocket的改进 一，什么是websocket WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议） 它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的 Websocket是一个
SpringBoot2.0集成WebSocket，实现后台向前端推送信息
热门推荐
★【World Of Moshow 郑锴】★
05-10 43万+
什么是WebSocket? - 初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？ - 答案很简单，因为 HTTP 协议有一个缺陷：***通信只能由客户端发起***，HTTP 协议做不到服务器主动向客户端推送信息。 https://github.com/moshowgame/spring-cloud-study/tree/master/spring-cloud-study-websocket
websocket即时通讯
学Java，找哪吒
12-27 2万+
目录一、websocket简介二、背景三、优点1、控制开销2、实时性更强3、保持连接状态4、更好的二进制支持5、支持扩展和更好的实现压缩效果四、原理1、客户端、服务器建立TCP连接，三次握手。2、TCP连接成功后，客户端通过HTTP协议向服务器传送websocket支持的版本号信息。（开始前的HTTP握手）3、服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据。4、当收到了连接成功的消息后，通过TCP通道进行传输通信。五、websocket和socket的关系六、SuperWebSocket实现服务
webSocket
古笑来的博客
12-14 1720
webSocket 1、简介 WebSocket协议是基于TCP的一种新的网络协议，和http协议一样属于应用层协议，它实现了浏览器与服务器全双工(full-duplex)通信，也就是允许服务器主动发送信息给客户端。我在实现二维码扫描登录时曾使用过，有了它就不需要通过轮询或者建立长连接的方式来使客户端实时获取扫码状态，因为当扫码后，服务器端可以主动发送消息通知客户端。 2、webSocket和http的区别 http链接分为短链接和长链接，短链接是每次请求都要重新建立TCP链接，TCP又要三次握手才能建立，
.net websocket
10-14
.net winform websocket vs2019 有服务器端，有客户端 还有网页测试端很好用，
websocket c语言实现
10-07
websocket c语言实现， 包含httpparser， sha1 算法，wsparser，实现了websocket 服务器的协议部分。vs 作为ide，可修改到linux下实现
websocket总结
07-25
websocket总结
WebSocket实战
03-01
本文介绍了HTML5WebSocket的由来，运作机制及客户端和服务端的API实现，重点介绍服务端（基于Tomcat7）及客户端（基于浏览器原生HTML5API）实现的详细步骤；并通过实际客户案例描述了客户端如何在WebSocket架构下...
jquery获取form表单的数据
wqq578
11-28 3693
$(form).serializeObject() ; $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { ...
阿里云oss上传照片js 、jquery
wqq578
07-25 3316
阿里云oss设置 Bucket设置 从浏览器中直接访问OSS需要开通Bucket的CORS设置： 将allowed origins设置成 * 将allowed methods设置成 PUT, GET, POST, DELETE, HEAD 将allowed headers设置成 * 将expose headers设置成 etag x-oss-request-id 注意：请将该条CORS...
去掉ios弹出框alert和confirm网址问题
wqq578
03-06 841
&lt;script&gt; window.alert = function(name){ var iframe = document.createElement("IFRAME"); iframe.style.display="none"; iframe.setAttribute("src", 'data:text/plain,'); ...
jquery滚动事件java实现分页，默认为0第一页
wqq578
02-13 627
1.滑动触发事件 $(document).ready(function() { $(window).scroll(function() { if ($(document).scrollTop() &gt;= $(document).height() - $(window).height()) { ge...
jquery方法介绍
wqq578
11-02 139
方法：$.extend var object1 = { apple: 0, banana: { weight: 52, price: 100 }, cherry: 97 }; var object2 = { banana: { price: 200 }, durian: 100 }; //...
后端开发是一个涉及广泛技术和工具的领域.docx
最新发布
04-30
后端开发是一个涉及广泛技术和工具的领域，这些资源对于构建健壮、可扩展和高效的Web应用程序至关重要。以下是对后端开发资源的简要介绍： 首先，掌握一门或多门编程语言是后端开发的基础。Java、Python和Node.js是其中最受欢迎的几种。Java以其跨平台性和丰富的库而著名，Python则因其简洁的语法和广泛的应用领域而备受欢迎。Node.js则通过其基于JavaScript的单线程异步I/O模型，为Web开发提供了高性能的解决方案。 其次，数据库技术是后端开发中不可或缺的一部分。关系型数据库（如MySQL、PostgreSQL）和非关系型数据库（如MongoDB、Redis）各有其特点和应用场景。关系型数据库适合存储结构化数据，而非关系型数据库则更适合处理大量非结构化数据。 此外，Web开发框架也是后端开发的重要资源。例如，Express是一个基于Node.js的Web应用开发框架，它提供了丰富的API和中间件支持，使得开发人员能够快速地构建Web应用程序。Django则是一个用Python编写的Web应用框架，它采用了MVC的软件设计模式，使得代码结构更加清晰和易于维护。
华为数字化转型实践28个精华问答glkm.pptx
04-30
华为数字化转型实践28个精华问答glkm.pptx
新员工入职培训全流程资料包gl.zip
04-30
新员工入职培训全流程资料包（100+个文件） 1入职流程指引 万科新职员入职通知书 万科新职员入职引导手册 新进员工跟进管理表 新员工入职报到工作单(文职) 新员工入职报到流程 新员工入职流程表 新员工入职手续办理流程(工厂 新员工入职手续清单 新员工入职须知 新员工入职训流程 新员工入职引导表(导师用) 2 入职工具表格 3 培训方案计划 4培训管理流程 5培训教材课件 6 培训效果检测 7 员工管理制度 8 劳动合同协议 9 新员工培训PPT模板(28套)
　websocket
09-12
WebSocket是一个持久化的协议，通过握手机制，客户端和服务器之间可以建立一个类似于TCP的连接，从而方便它们之间的通信。在WebSocket出现之前，web交互一般是基于HTTP协议的短连接或者长连接。WebSocket是一种全新...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值