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 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
js 对象是否存在判断
Jul 15 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 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
PL-880隐藏功能
2021/03/01 无线电
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
微信小程序自动客服功能
2017/11/02 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
python实现在线翻译功能
2020/03/03 Python
python实现梯度法 python最速下降法
2020/03/24 Python
python 模拟登录B站的示例代码
2020/12/15 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
大学生职业规划前言模板
2013/12/27 职场文书
便利店投资创业计划书
2014/02/08 职场文书
市场营销专业自荐书
2014/06/10 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
吴仁宝观后感
2015/06/09 职场文书
于丹论语心得观后感
2015/06/15 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书