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还提供了封装每个事件类型的方法。如果你们后台封装了特定的事件方法就按照你们的自己来,这个你们前后台自己商量着来;
拜拜,周末愉快!!!
WebSocket前后台交互的更多相关文章
- Devexpress 使用经验 —— ASPxGridView前后台交互写法推荐
这里的格式是仁者见仁智者见智,这篇随笔只是我在工作过程中总结出的阅读性高,对我来说效率较高的写法. ASPX: <dx:ASPxGridView ID="ASPxGridViewLin ...
- jquery ajax返回json数据进行前后台交互实例
jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...
- JAVA配置&注解方式搭建简单的SpringMVC前后台交互系统
前面两篇文章介绍了 基于XML方式搭建SpringMVC前后台交互系统的方法,博文链接如下: http://www.cnblogs.com/hunterCecil/p/8252060.html htt ...
- ajax实现异步前后台交互,模拟百度搜索框智能提示
1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...
- 前后台交互经常使用的技术汇总(后台:Java技术,前台:Js或者Jquery)
1:由于针对特定的前后台交互用到的知识总结,所以不大量贴代码,主要给出思路,方便自己以后脑补和技术总结,当然也希望可以帮助到别人. 后台Json和其他格式转化,之前总结过Json和对象,集合,字符串的 ...
- MySQL前后台交互登录系统设计
1.首先我们做一个前台的注册页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- ajax的底层前后台交互
为什么用ajax或者它的优点: 异步加载数据,无需切换页面 更加的用户体验,局部刷新,及时验证,操作步骤简化: 节省流量 js控制数据的加载,更加灵活多用. 底层就是XMLHttpRequest对象: ...
- 基础框架整合-ssm框架+前后台交互完整教程
1.基本概念 ssm:spring+springMVC+mybatis 2.开发环境 Eclipse mars + jdk1.7 + maven + tomcat7 3.使用maven构建web项目 ...
- ztree的添加、修改、删除及前后台交互
一.引入资源下载并引入ztree的相关js,css和img等.http://www.treejs.cn/v3/api.php ztree的核心代码jquery.ztree.core.jsztree关于 ...
随机推荐
- 【题解】Luogu CF915E Physical Education Lessons
原题传送门:CF915E Physical Education Lessons 前置芝士:珂朵莉树 窝博客里对珂朵莉树的介绍 没什么好说的自己看看吧 这道题很简单啊 每个操作就是区间赋值,顺带把总和修 ...
- TCP 的那些事儿(上)(转)
原文地址:http://kb.cnblogs.com/page/209100/ TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身是个比较痛苦的过 ...
- 如何写好接口(php写app移动端接口示例)
原文链接:https://blog.csdn.net/xwh670570759/article/details/52130585?utm_source=blogxgwz0
- Java基础语法(下)
1.数组动态初始化 //数据类型[] 数组名 = new 数据类型[数组长度]; int[] arr = new int[3]; /* * 左边: * int:说明数组中的元素类型是int类型 * [ ...
- 闪存中的NorFlash、NandFlash及eMMC三者的区别【转】
本文转载自:https://blog.csdn.net/Blazar/article/details/77843655 快闪存储器(英语:Flash Memory),是一种电子式可清除程序化只读存储器 ...
- eMMC分区详解【转】
本文转载自:https://blog.csdn.net/wxh0000mm/article/details/77864002 转自:http://blog.csdn.net/junzhang1122/ ...
- POJ 1904 King's Quest(强连通图)题解
题意:n个王子有自己喜欢的ki个公主,有n个公主,每个王子只能娶一个自己喜欢的公主且不能绿别的王子.现在给你一种王子娶公主的方案,并且保证这种方案是正确的.请你给出,每个王子能娶哪些公主,要求娶这些公 ...
- P4609 [FJOI2016]建筑师
思路 裸的第一类斯特林数,思路和CF960G相同 预处理组合数和第一类斯特林数回答即可 代码 #include <cstdio> #include <cstring> #inc ...
- Selenium Webdriver 自动化测试开发常见问题(C#版)
转一篇文章,有修改,出处http://www.7dtest.com/site/blog-2880-203.html 1:Selenium中对浏览器的操作 首先生成一个Web对象 IWebDriver ...
- ES6中Promise的入门(结合例子)
一.Promise的前言 解决回调地狱 //以往回调方式 函数1(function(){ //代码执行...(ajax1) 函数2(function(){ //代码执行...(ajax2) 函数3(f ...