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篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
随机推荐
- 我的第八个java程序--读取word内容
package World; import java.io.FileNotFoundException; import java.io.IOException; import org.apache.p ...
- 根据分辨率改变宽度 demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- servlet 传值给 jsp
java package helloworld; import java.io.IOException; import javax.servlet.RequestDispatcher; import ...
- node c++ addon注意事项
The module_name needs to match the filename of the final binary (minus the .node suffix).
- HDU1087 Super Jumping! Jumping! Jumping! 最大连续递增子段
Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
- 安装使用yarn,使用国内镜像加速npm和yarn
安装yarn https://yarnpkg.com/lang/zh-hans/docs/install/ 使用国内镜像加速npm和yarn 1. npm config set registry=ht ...
- sedna进行xquery查询
有一个文件book.xml: <books> <book> <name>The Call Of Wild</name> <author>Ja ...
- 进程通信(socket)
“一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的socket. ——有感于实际编程和开源项目研究. 我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览 ...
- Intellij IDEA工具的常用快捷键
掌握如下常用快捷键可以使自己的开发效率提供十倍. ctrl + B : 转到类或者方法的定义 ctrl + Alt + B:弹出接口/虚类的实现类/子类 ctrl + Alt + 左箭头/右箭头 : ...
- jQuery之map()和get() map().get().join意思
jQuery下有个概念叫“类数组”,比如$( " li " ),当取到一个集合的时候,会有数组的一些属性,但是instancseof Array仍然是false.但是var a=$ ...