Javascript WebSocket使用实例介绍(简明入门教程)


Posted in Javascript onApril 16, 2014

一旦你了解了网络套接字与WEB服务器的连接,你将可以从浏览器发送数据到服务器并且可以接收由服务器返回的响应数据。

以下是创建一个新的WebSocket对象的API:

var Socket = new WebSocket(url, [protocal] );

这里第一个参数是指要连接的URL,第二个参数是可选的,如果需要的话,则是指定一个的服务器支持的协议。

WEB Socket属性:

属性 说明
Socket.readyState readyState的代表的ReadOnly属性的连接状态。它可以有以下值: 一个0值表示该连接尚未建立。 值为1表示连接建立和沟通是可能的。 值为2表示连接是通过将结束握手。 值为3表示连接已关闭或无法打开。
Socket.bufferedAmount 读属性的bufferedAmount代表文本的字节数,utf - 8的排队使用send()方法。

WEB Socket事件:

事件 处理程序 说明
open Socket.onopen 此事件发生在套接字建立连接。
message Socket.onmessage 此事件发生时,客户端收到来自服务器的数据。
error Socket.onerror 此事件发生时有任何通信错误。
close Socket.onclose 此事件发生在连接关闭。

WEB Socket方法:

方法 说明
Socket.send() send(data)方法用来连接传输数据。
Socket.close() close()方法将被用于终止任何现有的连接。

WEB Socket例子:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function WebSocketTest()
{
  if ("WebSocket" in window)
  {
     alert("WebSocket is supported by your Browser!");
     // Let us open a web socket
     var ws = new WebSocket("ws://localhost:9998/echo");
     ws.onopen = function()
     {
        // Web Socket is connected, send data using send()
        ws.send("Message to send");
        alert("Message is sent...");
     };
     ws.onmessage = function (evt)
     {
        var received_msg = evt.data;
        alert("Message is received...");
     };
     ws.onclose = function()
     {
        // websocket is closed.
        alert("Connection is closed...");
     };
  }
  else
  {
     // The browser doesn't support WebSocket
     alert("WebSocket NOT supported by your Browser!");
  }
}
</script>
</head>
<body>
<div id="sse">
   <a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>
Javascript 相关文章推荐
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
整理一下常见的IE错误
Nov 18 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
JavaScript框架(iframe)操作总结
Apr 16 #Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 #Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 #Javascript
JavaScript面向对象编程入门教程
Apr 16 #Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 #Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 #Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 #Javascript
You might like
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python使用chardet判断字符编码
2015/05/09 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
python装饰器代码深入讲解
2021/03/01 Python
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
高中语文课后反思
2014/04/27 职场文书
大学生个人简历自荐信
2015/03/06 职场文书