其实老早就觊觎 Socket 这碗美食了,在 WebSocket 发出后更是心潮澎湃...

奈何这需要后端同志的帮助,使得至今才得以品尝。(当然本文也只涉及前端部分)

以前想监听其他设备变化,大屏幕交互,还有客服,多设备游戏等,

用过轮询(特定的时间间隔请求一次),后来也受教使用长链接(后端实现链接 1s 内不断,断了再请求)

但总要为性能这事捏一把汗,

而 Socket/WebSocket 就是即时通信,就是能很好的完成上述需求呀,

啊哈哈哈,不禁笑出了声音...

好的,回归正题,先看封装代码

  1. function Socket(url, options) {
  2. var opt = $.extend({
  3. onopen: function(e){},
  4. whenGet: function(val){},
  5. onreset: function(){},
  6. beforeClose: function(){},
  7. onclose: function(){}, // (注:此处已不能再传输,为关闭后运行)
  8. }, options || {});
  9.  
  10. var wsImpl = window.WebSocket || window.MozWebSocket;
  11. var socket = new wsImpl(url);
  12.  
  13. // 关闭或刷新页面时,也关闭 socket
  14. var DispClose = true;
  15. $(window).on('beforeunload', CloseEvent);
  16. $(window).on('unload', UnLoadEvent);
  17. function _close() {
  18. opt.beforeClose.apply(this, arguments);
  19. socket.close();
  20. }
  21. function CloseEvent() {
  22. if (DispClose) return "是否离开当前页面?";
  23. _close();
  24. }
  25. function UnLoadEvent() {
  26. DispClose = false;
  27. _close();
  28. }
  29.  
  30. // WebSocket 本身事件
  31. socket.onopen = function(){
  32. opt.onopen.apply(this, arguments);
  33. }
  34. socket.onclose = function(){
  35. opt.onclose.apply(this, arguments);
  36. }
  37. socket.onmessage = function(){
  38. opt.whenGet.apply(this, arguments);
  39. }
  40. socket.onerror = function(e){
  41. console.log(e);
  42. }
  43.  
  44. // 外放的其他方法
  45. return {
  46. send: function(val) {
  47. socket.send(val);
  48. },
  49. reset: function(){
  50. socket = new wsImpl(url);
  51. opt.onreset.apply(this);
  52. },
  53. close: _close,
  54. };
  55. }

演示地址: http://sum.kdcer.com/test/SocketGame/

技术难点:

1. 从后端那搞到 ws:// 格式的 url

2. 处理好 whenGet 的传值,可以看看演示的源码,这个就看需求,相当考逻辑了

但还有个小问题就是 socket 延时/主动断开的情况,beforeClose 就不运行了,也就不能传输告诉别人我挂了,这个很尴尬

敲黑板,WebSocket 是个好东西,大家快用起来吧,一起研究哈

WebSocket 初体验的更多相关文章

  1. websocket初体验(小程序)

    之前上个公司做过一个二维码付款功能,涉及到websocket功能,直接上代码 小程序onShow方法下加载: /** 页面的初始数据 **/ data: { code: "", o ...

  2. websocket初体验

    (function (window) { var wsUri = "ws://echo.websocket.org:9150"; var output; MyWebSocket = ...

  3. (一)SpringBoot基础篇- 介绍及HelloWorld初体验

    1.SpringBoot介绍: 根据官方SpringBoot文档描述,BUILD ANYTHING WITH SPRING BOOT (用SPRING BOOT构建任何东西,很牛X呀!),下面是官方文 ...

  4. SpringBoot初体验及原理解析

    一.前言 ​ 上篇文章,我们聊到了SpringBoot得以实现的幕后推手,这次我们来用SpringBoot开始HelloWorld之旅.SpringBoot是Spring框架对“约定大于配置(Conv ...

  5. (一)SpringBoot2.0基础篇- 介绍及HelloWorld初体验

    1.SpringBoot介绍: 根据官方SpringBoot文档描述,BUILD ANYTHING WITH SPRING BOOT (用SPRING BOOT构建任何东西,很牛X呀!),下面是官方文 ...

  6. Django3.0 异步通信初体验

    此前博主曾经写过一篇博文,介绍了Django3.0的新特性,其中最主要的就是加入对ASGI的支持,实现全双工的异步通信. 2019年12月2日,Django终于正式发布了3.0版本.怀着无比的期待,我 ...

  7. Django3.0 异步通信初体验(小结)

    2019年12月2日,Django终于正式发布了3.0版本.怀着无比的期待,我们来尝试一下吧! (附ASGI官方文档地址:https://asgi.readthedocs.io/en/latest/e ...

  8. .NET WebSockets 核心原理初体验

    上个月我写了<.NET gRPC核心功能初体验>, 里面使用gRPC双向流做了一个打乒乓球的Demo, 实时双向这两个标签是不是很熟悉,对, WebSockets也可以做实时双向通信. 本 ...

  9. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

随机推荐

  1. vSphere ESXi主机配置iSCSI存储

    vSphere ESXi主机配置iSCSI存储 vSphere ESXi主机一般连接的存储类型有光纤存储.iSCSI存储两类.本次案例为iSCSI存储连接ESXi主机的配置. 案例环境:ESXi主机通 ...

  2. layout折叠后显示标题

    Easyui的layout折叠后显示怎样可以显示标题 //在layout的panle全局配置中,增加一个onCollapse处理title$.extend($.fn.layout.paneldefau ...

  3. asp.net中TextBox只能输入数字的最简洁的两种方法

    如下TextBox <asp:textboxonkeypress="isnum()"id="TextBox1"runat="server&quo ...

  4. org.hibernate.ObjectNotFoundException: No row with the given identifier exists: [cn.facekee.cms.entity.CmsFansgroup#195]

    刚开始报错还是报的稀奇古怪的错误,让我纠结了好久,再三检查报错的位置,发现并没有错误,最后认真分析查看每行报错的信息才找到如题所述的错误!!!!! 报这种错误的原因可能是POJO映射文件中的字段和数据 ...

  5. PHP POST, GET 参数过滤,预防sql注入函数

    1. 实际过滤函数 可适当修改其中的正则表示式 1 static public function filterWords(&$str) 2 { 3 $farr = array( 4 " ...

  6. Atitit.软件仪表盘(4)--db数据库子系统-监測

    Atitit.软件仪表盘(4)--db数据库子系统-监測 连接数::: 死锁表列表:死锁基础列表(近期几条记录,时间,sql等) 3.对server进行监控.获取CUP.I/O使用情况   4.对数据 ...

  7. Django应用部署:nginx+uwsgi方式

    环境准备 nginx+uwsgi方式部署顾名思义,需要nginx和uwsgi两个软件包. nginx不用说,是必备的,关于nginx的安装本文不再赘述,详情可以自行搜索或者参考我以前的文章: Debi ...

  8. 七牛上传ipa后自动生成plist文件

    1.利用模板技术动态生成plist文件的内容:(模板内容和data替换为plist需要的内容) //artTemplate <script src="js/template.js&qu ...

  9. Codeforces Round #324 (Div. 2) (快速判断素数模板)

    蛋疼的比赛,当天忘了做了,做的模拟,太久没怎么做题了,然后C题这么简单的思路却一直卡到死,期间看了下D然后随便猜了下,暴力了下就过了. A.找一个能被t整除的n位数,那么除了<=10以外,其他都 ...

  10. 移动端H5页面自适应手机屏幕宽度

    1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem ...