ajax的数据传输是单向的,客户端和服务端没有连接-----客户端建立连接发送请求----服务器端沿着建立的连接返回相应----断开连接

websocket则是可以在客户端和服务器端进行双向的数据接收和发送

打个比方:小明在客厅看电视,小明的媳妇在卫生间洗衣服,小明的爸爸在书房看报纸,小明的妈妈在厨房做饭;小明的爸爸饿了,问小明:饭做好了么?这时小明只能去询问妈妈:饭做好了么,小明的妈妈回复小明说没做好,小明转而回复爸爸:饭没做好。如果按照ajax的习惯现场状态就变成了这样:小明的爸爸没过一秒钟问小明一次饭做没做好,小明只能一遍一遍的询问妈妈饭做没做好,然后不厌其烦的转达给爸爸;在整个一个过程中小明充当了服务器的角色,客户端(小明的爸爸)发出请求,服务器(小明)接收数据然后从数据库中(小明的妈妈)获取信息,再转达给小明的爸爸,才能达到实时展示信息的过程。然而引入websocket后,现场情况转变成了:小明的爸爸问小明:饭做好了没,小明转告妈妈:饭好了告诉爸爸一生,然后小明的妈妈把饭做好了直接告诉小明的爸爸:饭做好;

忽略上面我拙劣的例子,下面接着来看websocket

运行环境:基于node 安装
安装:npm install socket.io
工作流程:
服务器端 接收 connection 接收完了之后进行emit(发送)
客户端 需要connect

服务器端使用 nodejs语句编写:

        var http=require('http');
var fs=require('fs');
var io=require('socket.io');
var httpObj=http.createServer(function(req,res){ });
httpObj.listen();
var ws=io.listen(httpObj);
//服务器端接收数据
ws.on('connection',function(socket){
setInterval(function(){
socket.emit('time',Date.now());
},);
socket.on('khd',function(name,content){
console.log(name,content);
});
});

客户端语句编写:
客户端处理:
var ws=io.connect('ws://localhost:8081');
客户端接收数据:
ws.on('time',function(result){
console.log(result);
});
客户端向服务器端发送数据:
ws.emit('kind','','');
服务器端接收:
soket.on('kind',function(name,content){
console.log(name,content);
});

h5中websocket的更多相关文章

  1. uni-app中websocket的使用 断开重连、心跳机制

    前言 最近关于H5和APP的开发中使用到了webSocket,由于web/app有时候会出现网络不稳定或者服务端主动断开,这时候导致消息推送不了的情况,需要客户端进行重连.查阅资料后发现了一个心跳机制 ...

  2. swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析

    showWebView.dataDetectorTypes = .None //swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析 其UIDataDetectorTypes属性 ...

  3. 关于H5中的Canvas API的探索

    Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...

  4. 从web图片裁剪出发:了解H5中的canvas

    本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...

  5. java中websocket的应用

    在上一篇文章中,笔者简要介绍了websocket的应用场景及优点,戳这里 这篇文章主要来介绍一下在java项目中,特别是java web项目中websocket的应用. 场景:我做了一个商城系统,跟大 ...

  6. iOS下使状态栏颜色与H5中背景色一致

    iOS 中有的页面也能会内嵌WebView,然后WebView中用H5做了一个导航,而iOS 中状态栏的颜色很难调整的与H5中导航颜色一致.如下图所示: 其实出现这种原因,主要是因为使用16进制颜色, ...

  7. 微信H5中静默登录及非静默登录的正确使用姿势

    在微信中打开网页且需要调用微信登录接口时,微信官方给我们提供了两种登录调用方式:静默登录和非静默登录:但是官方文档中却没有说明在何种情况下使用静默登录,何种情况下使用非静默登录,所以在这里,我想将之前 ...

  8. h5中不能用js来直接获取网络码和机器码的。

    h5中不能用js来获取mac的.是可以获取ip的.代码  <script>var fso = new ActiveXObject("Scripting.FileSystemObj ...

  9. Jmeter中Websocket协议支持包的使用

    Jmeter中Websocket协议支持包的使用(转) 参考的来源是国外一篇文章,已经整理成pdf格式(http://yunpan.cn/cFzwiyeQDKdh3 (提取码:9bcf)) 转自:ht ...

随机推荐

  1. UISlider相关

    设置slider当前位置的图像 [slider setThumbImage:[UIImage imageNamed:@"dd.png"] forState:UIControlSta ...

  2. 遍历NSArray, NSDictionary, NSSet的方法总结

    1,for循环读取 NSArray: NSArray *array = /*…*/ ; i<array.count; i++) { id object = array[i]; // do sth ...

  3. Android四大组件之Activity一(组件的概念、Intent、监听)

    前言知识补充:  什么是组件?   1.它的类必须实现特定接口或继承特定类   2.需要在配置文件中配置其全类名   3.它的对象不是通过new来创建的, 而是系统自动创建的   4.它的对象具有一定 ...

  4. C语言ASCII码、运算符优先级、转义字符

  5. android apk静默安装

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/47803149 之前有很多朋友都问过我,在Android系统中怎样才能实现静默安装呢 ...

  6. 【代码笔记】iOS-竖排文字

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

  7. 【代码笔记】iOS-按钮带下划线的写法

    一,效果图. 二,工程图. 三,代码. RootViewController.h RootViewController.m - (void)viewDidLoad { [super viewDidLo ...

  8. get和post的区别与乱码问题解决

    ★ get和post的区别:     1.get请求通过url地址发送请求参数,可以在地址栏上直接显示     2.post请求通过请求体发送请求参数,不会再地址栏上显示     3.get在地址栏显 ...

  9. android Gui系统之SurfaceFlinger(4)---Vsync(1)

    8.Vsync 8.1概论 VSYNC(Vertical Synchronization)是一个相当古老的概念,对于游戏玩家,它有一个更加大名鼎鼎的中文名字—-垂直同步. “垂直同步(vsync)”指 ...

  10. EMC Documentum DQL整理(一)

    1.Get user SELECT * FROM dm_user WHERE r_is_group = 0   2.Get Group SELECT * FROM dm_group WHERE gro ...