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

  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还提供了封装每个事件类型的方法。如果你们后台封装了特定的事件方法就按照你们的自己来,这个你们前后台自己商量着来;

拜拜,周末愉快!!!

WebSocket前后台交互的更多相关文章

  1. Devexpress 使用经验 —— ASPxGridView前后台交互写法推荐

    这里的格式是仁者见仁智者见智,这篇随笔只是我在工作过程中总结出的阅读性高,对我来说效率较高的写法. ASPX: <dx:ASPxGridView ID="ASPxGridViewLin ...

  2. jquery ajax返回json数据进行前后台交互实例

    jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...

  3. JAVA配置&注解方式搭建简单的SpringMVC前后台交互系统

    前面两篇文章介绍了 基于XML方式搭建SpringMVC前后台交互系统的方法,博文链接如下: http://www.cnblogs.com/hunterCecil/p/8252060.html htt ...

  4. ajax实现异步前后台交互,模拟百度搜索框智能提示

    1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...

  5. 前后台交互经常使用的技术汇总(后台:Java技术,前台:Js或者Jquery)

    1:由于针对特定的前后台交互用到的知识总结,所以不大量贴代码,主要给出思路,方便自己以后脑补和技术总结,当然也希望可以帮助到别人. 后台Json和其他格式转化,之前总结过Json和对象,集合,字符串的 ...

  6. MySQL前后台交互登录系统设计

    1.首先我们做一个前台的注册页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. ajax的底层前后台交互

    为什么用ajax或者它的优点: 异步加载数据,无需切换页面 更加的用户体验,局部刷新,及时验证,操作步骤简化: 节省流量 js控制数据的加载,更加灵活多用. 底层就是XMLHttpRequest对象: ...

  8. 基础框架整合-ssm框架+前后台交互完整教程

    1.基本概念 ssm:spring+springMVC+mybatis 2.开发环境 Eclipse mars + jdk1.7 + maven + tomcat7 3.使用maven构建web项目 ...

  9. ztree的添加、修改、删除及前后台交互

    一.引入资源下载并引入ztree的相关js,css和img等.http://www.treejs.cn/v3/api.php ztree的核心代码jquery.ztree.core.jsztree关于 ...

随机推荐

  1. redhat7.4+shell离线安装docker

    首先要准备离线安装包 1.docker官网下载 2.docker-compose gitbub官网下载 3.我的docker-compose install-docker.sh #!/bin/sh u ...

  2. 利用shell脚本通过ssh绕过输入密码直接登录主机

    shell #!/usr/bin/expect spawn ssh root@192.168.137.141 expect "*password:" send "lizh ...

  3. mint-ui之Swipe使用

    <template> <div> <div class="swipe-wrapper"> <mt-swipe :auto="10 ...

  4. 【4OpenCV】OpenCV和RTSP的综合研究

    一.RTSP是什么?用来干什么? RTSP(Real Time Streaming Protocol),RFC2326,实时流传输协议,是TCP/IP协议体系中的一个应用层协议,由哥伦比亚大学.网景和 ...

  5. opencvbase 实现opencv打开摄像头和初步处理等效果操作(附源码)

    // TwoCameraOnTimer2Dlg.cpp : 实现文件 /* CvMat, Mat, IplImage之间的互相转换 IpIImage -> CvMat CvMat mathead ...

  6. Java基础语法(上)

    Java编译报错出现非法字符,原因是存在中文字符. Java关键字的字母都是小写. Java是一种强类型语言,针对每一种数据都给出了明确的数据类型. 数据类型分类: A:基本数据类型 B:引用数据类型 ...

  7. 集训总结DAY.1(18.5.22)——KMP

    DAY 1——5.22 in the morning 依稀记得我们有一场contest. at night chf大佬讲KMP,先膜一波~~~ luoguP3375KMP模板题 KMP算法,又称模式匹 ...

  8. The more... the more句型

    百度文库:https://wenku.baidu.com/view/a7f1067f59fb770bf78a6529647d27284a73374b.html the more ... , the m ...

  9. (转载)C#:Form1_Load()不被执行的三个解决方法

    我的第一个c#练习程序,果然又出现问题了...在Form1_Load() not work.估计我的人品又出现问题了. 下面实现的功能很简单,就是声明一个label1然后,把它初始化赋值为hello, ...

  10. Redis架构设计

    高可用Redis服务架构分析与搭建 各种web开发业务中最为常用的key-value数据库了 应用: 在业务中用其存储用户登陆态(Session存储),加速一些热数据的查询(相比较mysql而言,速度 ...