WebSocket 初体验
其实老早就觊觎 Socket 这碗美食了,在 WebSocket 发出后更是心潮澎湃...
奈何这需要后端同志的帮助,使得至今才得以品尝。(当然本文也只涉及前端部分)
以前想监听其他设备变化,大屏幕交互,还有客服,多设备游戏等,
用过轮询(特定的时间间隔请求一次),后来也受教使用长链接(后端实现链接 1s 内不断,断了再请求)
但总要为性能这事捏一把汗,
而 Socket/WebSocket 就是即时通信,就是能很好的完成上述需求呀,
啊哈哈哈,不禁笑出了声音...
好的,回归正题,先看封装代码
- function Socket(url, options) {
- var opt = $.extend({
- onopen: function(e){},
- whenGet: function(val){},
- onreset: function(){},
- beforeClose: function(){},
- onclose: function(){}, // (注:此处已不能再传输,为关闭后运行)
- }, options || {});
- var wsImpl = window.WebSocket || window.MozWebSocket;
- var socket = new wsImpl(url);
- // 关闭或刷新页面时,也关闭 socket
- var DispClose = true;
- $(window).on('beforeunload', CloseEvent);
- $(window).on('unload', UnLoadEvent);
- function _close() {
- opt.beforeClose.apply(this, arguments);
- socket.close();
- }
- function CloseEvent() {
- if (DispClose) return "是否离开当前页面?";
- _close();
- }
- function UnLoadEvent() {
- DispClose = false;
- _close();
- }
- // WebSocket 本身事件
- socket.onopen = function(){
- opt.onopen.apply(this, arguments);
- }
- socket.onclose = function(){
- opt.onclose.apply(this, arguments);
- }
- socket.onmessage = function(){
- opt.whenGet.apply(this, arguments);
- }
- socket.onerror = function(e){
- console.log(e);
- }
- // 外放的其他方法
- return {
- send: function(val) {
- socket.send(val);
- },
- reset: function(){
- socket = new wsImpl(url);
- opt.onreset.apply(this);
- },
- close: _close,
- };
- }
演示地址: http://sum.kdcer.com/test/SocketGame/
技术难点:
1. 从后端那搞到 ws:// 格式的 url
2. 处理好 whenGet 的传值,可以看看演示的源码,这个就看需求,相当考逻辑了
但还有个小问题就是 socket 延时/主动断开的情况,beforeClose 就不运行了,也就不能传输告诉别人我挂了,这个很尴尬
敲黑板,WebSocket 是个好东西,大家快用起来吧,一起研究哈
WebSocket 初体验的更多相关文章
- websocket初体验(小程序)
之前上个公司做过一个二维码付款功能,涉及到websocket功能,直接上代码 小程序onShow方法下加载: /** 页面的初始数据 **/ data: { code: "", o ...
- websocket初体验
(function (window) { var wsUri = "ws://echo.websocket.org:9150"; var output; MyWebSocket = ...
- (一)SpringBoot基础篇- 介绍及HelloWorld初体验
1.SpringBoot介绍: 根据官方SpringBoot文档描述,BUILD ANYTHING WITH SPRING BOOT (用SPRING BOOT构建任何东西,很牛X呀!),下面是官方文 ...
- SpringBoot初体验及原理解析
一.前言 上篇文章,我们聊到了SpringBoot得以实现的幕后推手,这次我们来用SpringBoot开始HelloWorld之旅.SpringBoot是Spring框架对“约定大于配置(Conv ...
- (一)SpringBoot2.0基础篇- 介绍及HelloWorld初体验
1.SpringBoot介绍: 根据官方SpringBoot文档描述,BUILD ANYTHING WITH SPRING BOOT (用SPRING BOOT构建任何东西,很牛X呀!),下面是官方文 ...
- Django3.0 异步通信初体验
此前博主曾经写过一篇博文,介绍了Django3.0的新特性,其中最主要的就是加入对ASGI的支持,实现全双工的异步通信. 2019年12月2日,Django终于正式发布了3.0版本.怀着无比的期待,我 ...
- Django3.0 异步通信初体验(小结)
2019年12月2日,Django终于正式发布了3.0版本.怀着无比的期待,我们来尝试一下吧! (附ASGI官方文档地址:https://asgi.readthedocs.io/en/latest/e ...
- .NET WebSockets 核心原理初体验
上个月我写了<.NET gRPC核心功能初体验>, 里面使用gRPC双向流做了一个打乒乓球的Demo, 实时双向这两个标签是不是很熟悉,对, WebSockets也可以做实时双向通信. 本 ...
- .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
随机推荐
- vSphere ESXi主机配置iSCSI存储
vSphere ESXi主机配置iSCSI存储 vSphere ESXi主机一般连接的存储类型有光纤存储.iSCSI存储两类.本次案例为iSCSI存储连接ESXi主机的配置. 案例环境:ESXi主机通 ...
- layout折叠后显示标题
Easyui的layout折叠后显示怎样可以显示标题 //在layout的panle全局配置中,增加一个onCollapse处理title$.extend($.fn.layout.paneldefau ...
- asp.net中TextBox只能输入数字的最简洁的两种方法
如下TextBox <asp:textboxonkeypress="isnum()"id="TextBox1"runat="server&quo ...
- org.hibernate.ObjectNotFoundException: No row with the given identifier exists: [cn.facekee.cms.entity.CmsFansgroup#195]
刚开始报错还是报的稀奇古怪的错误,让我纠结了好久,再三检查报错的位置,发现并没有错误,最后认真分析查看每行报错的信息才找到如题所述的错误!!!!! 报这种错误的原因可能是POJO映射文件中的字段和数据 ...
- PHP POST, GET 参数过滤,预防sql注入函数
1. 实际过滤函数 可适当修改其中的正则表示式 1 static public function filterWords(&$str) 2 { 3 $farr = array( 4 " ...
- Atitit.软件仪表盘(4)--db数据库子系统-监測
Atitit.软件仪表盘(4)--db数据库子系统-监測 连接数::: 死锁表列表:死锁基础列表(近期几条记录,时间,sql等) 3.对server进行监控.获取CUP.I/O使用情况 4.对数据 ...
- Django应用部署:nginx+uwsgi方式
环境准备 nginx+uwsgi方式部署顾名思义,需要nginx和uwsgi两个软件包. nginx不用说,是必备的,关于nginx的安装本文不再赘述,详情可以自行搜索或者参考我以前的文章: Debi ...
- 七牛上传ipa后自动生成plist文件
1.利用模板技术动态生成plist文件的内容:(模板内容和data替换为plist需要的内容) //artTemplate <script src="js/template.js&qu ...
- Codeforces Round #324 (Div. 2) (快速判断素数模板)
蛋疼的比赛,当天忘了做了,做的模拟,太久没怎么做题了,然后C题这么简单的思路却一直卡到死,期间看了下D然后随便猜了下,暴力了下就过了. A.找一个能被t整除的n位数,那么除了<=10以外,其他都 ...
- 移动端H5页面自适应手机屏幕宽度
1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem ...