zoukankan      html  css  js  c++  java
  • WebSocket前后台交互

    其实对于前后台交互有很多种方法(只列举我知道的,嘻嘻):

      1:from 表单:

        使用场景——小信息量提交给后台

      2:ajax(跨域的话用jsonp):

        可以进行多量的前后台信心传递;

        但实时性不高,不适合要求实时性的场景;例如qq聊天

      3:webscoket:

        可以进行大量的前后台信息传递,

        实时性也十分良好;主要应用场景为聊天场景;

    一:websocket

      1:创建一个websocket实例:

         var socket = new WebSocket(socketUrl); socketUrl代表的是请求的地址,类似于ajax的url

      2:链接服务器进行前后台交互以及事件处理:

         socket.onopen = function(event) { 

           //想要验证是否连接成功可以给后台发一个消息
            socket.send('我已经连接成功了么'); 

          // 这个事件监听,可以监听后台返回来给你的消息,即str就是
            socket.onmessage = function(str) { 
               console.log(str); 
            }; 

          // 监听Socket的关闭
            socket.onclose = function(str) { 
                console.log(str); 
            };

          // 关闭Socket.... (需要的时候把注释去掉)
           //socket.close() ;

        };

    其实websocket用起来特别的容易,但是有一个缺点就是ie不兼容,那怎么办呢,还有一个办法就是socket.io.js,它看起来非常像客户端API,建立客户端Socket.IO;

    二:带Socket.IO的WebSocket:

      Socket.IO可以从GitHub下载,可以把socket.io.js文件包含到页面中:

      <script src="js/socket.io.js"></script>

      此时,Socket.IO在此页面上是有效的,是时候创建Socket了:

      1://创建Socket.IO实例,建立连接

      var socket = new io.Socke(bollmskn);//bollmskn代表的是请求地址,类似ajax的url

      socket.connect();

      2:// 连接监听

      socket.on('connect',function() { 
        console.log('服务器已连接!'); // 这里可以做一些事件的处理啊,什么的比如做一个提示啊什么的;
      });

      3://建立一个事件监听,监听后台返回来的数据

      socket.on('message',function(data) { 
        console.log('这是后台返回来的消息',data); 
      });

      4:// 通过Socket发送一条消息到服务器

      function sendMessageToServer(message) { 
        socket.send(message); 
      }

      5// 添加一个关闭连接的监听器

      socket.on('disconnect',function() { 
        console.log('链接已关闭!'); 
      });

    Socket.IO还提供了由本地WebSocket API提供的普通连接、断开连接、消息事件。Socket还提供了封装每个事件类型的方法。如果你们后台封装了特定的事件方法就按照你们的自己来,这个你们前后台自己商量着来;

    拜拜,周末愉快!!!

  • 相关阅读:
    Xshell学习第九课:数组与字符串
    Xshell学习第八课:函数
    Xshell学习第七课:sed语句
    Xshell学习第六课:read与for语句循环
    Xshell学习第五课:if判断语句
    Xshell学习第四课:grep与正则表达式
    Xshell学习第三课:编程原理
    Xshell学习第二课:重定向和管道符
    iOS中坐标转换
    iOS工作笔记(十五)
  • 原文地址:https://www.cnblogs.com/lijuntao/p/6496906.html
Copyright © 2011-2022 走看看