h5中websocket
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的更多相关文章
- uni-app中websocket的使用 断开重连、心跳机制
前言 最近关于H5和APP的开发中使用到了webSocket,由于web/app有时候会出现网络不稳定或者服务端主动断开,这时候导致消息推送不了的情况,需要客户端进行重连.查阅资料后发现了一个心跳机制 ...
- swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析
showWebView.dataDetectorTypes = .None //swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析 其UIDataDetectorTypes属性 ...
- 关于H5中的Canvas API的探索
Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...
- 从web图片裁剪出发:了解H5中的canvas
本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...
- java中websocket的应用
在上一篇文章中,笔者简要介绍了websocket的应用场景及优点,戳这里 这篇文章主要来介绍一下在java项目中,特别是java web项目中websocket的应用. 场景:我做了一个商城系统,跟大 ...
- iOS下使状态栏颜色与H5中背景色一致
iOS 中有的页面也能会内嵌WebView,然后WebView中用H5做了一个导航,而iOS 中状态栏的颜色很难调整的与H5中导航颜色一致.如下图所示: 其实出现这种原因,主要是因为使用16进制颜色, ...
- 微信H5中静默登录及非静默登录的正确使用姿势
在微信中打开网页且需要调用微信登录接口时,微信官方给我们提供了两种登录调用方式:静默登录和非静默登录:但是官方文档中却没有说明在何种情况下使用静默登录,何种情况下使用非静默登录,所以在这里,我想将之前 ...
- h5中不能用js来直接获取网络码和机器码的。
h5中不能用js来获取mac的.是可以获取ip的.代码 <script>var fso = new ActiveXObject("Scripting.FileSystemObj ...
- Jmeter中Websocket协议支持包的使用
Jmeter中Websocket协议支持包的使用(转) 参考的来源是国外一篇文章,已经整理成pdf格式(http://yunpan.cn/cFzwiyeQDKdh3 (提取码:9bcf)) 转自:ht ...
随机推荐
- SharePoint 2010 常用技巧及方法总结
1.代码调试确定进程cd c:\windows\system32\inetsrvappcmd list wppause注:保存成批处理文件,查看进程.bat,用的时候双击即可 2.类似列表新建打开方式 ...
- 微信小程序之后台https域名绑定以及免费的https证书申请
微信小程序在11月3号发布了,这是一个全新的生态,没有赶上微信公众号红利的开发者,运营者可别错过这趟车了. 但是微信的后台需要全https,之前我还不相信,后台注册了后进后台才发现,服务器配置如下图 ...
- xmpp整理笔记:发送图片信息和声音信息
图片和音频文件发送的基本思路就是: 先将图片转化成二进制文件,然后将二进制文件进行base64编码,编码后成字符串.在即将发送的message内添加一个子节点,节点的stringValue(节点的值) ...
- Android 手机卫士--home界面布局
本文实现当从splash界面进入hone界面的时候,产生一种渐进淡入的动画效果,在onCreate中调用一个方法initAnimation(),代码如下: /** * 添加淡入的动画效果 */ pri ...
- [读书笔记] CSS权威指南1: 选择器
通配选择器 可以与任何元素匹配,就像是一个通配符 /*每一个元素的字体都设置为红色*/ * { color: red; } 元素选择器 指示文档元素的选择器. /*为body的字体设置为红色*/ bo ...
- Mac OS 文件、文件夹重命名的方法
在Mac OS中,文件和文件名重命名的方法非常简单 选中你想要命名的文件或者文件夹,按回车,可以直接重命名,输入你要修改的内容,确认后,再按回车就OK啦--- 希望能对你有所帮助^_^
- Java基础知识学习(四)
高级特性:内部类.抽象类 内部类(Inner Class),有时也称为嵌套类(Nested Class) 允许在一个类(或方法.语句块)的内部定义另一个类 使用内部类的主要原因有: 内部类可以访问外部 ...
- VC对ScrollView的调整
VC对ScrollView的调整 automaticallyAdjustsScrollViewInsets automaticallyAdjustsScrollViewInsets是ViewContr ...
- java自定义Annotation(载自百度文库)
java中自定义annotation需要@interface关键字和用到几个内置annotation. 用到的注解有@Target,@Retention,@Documented,@Inherited ...
- 利用 druid 解析器解析SQL
最近参与一个开源项目,一个功能的实现,用到了 druid 解析器来解析SQL,记录下如果使用 druid 来解析SQL,实现对SQL的拦截改写. 1. 对 insert 语句进行解析: private ...