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 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 Javascript
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
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
实现Python与STM32通信方式
2019/12/18 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2014年派出所工作总结
2014/11/21 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
暑假打工感想
2015/08/07 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
Python安装使用Scrapy框架
2022/04/12 Python