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 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
web 页面分页打印的实现
Jun 22 Javascript
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
jQuery MD5加密实现代码
Mar 15 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 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
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
javaScript 页面自动加载事件详解
2014/02/10 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python使用Shelve保存对象方法总结
2019/01/28 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
树莓派实现移动拍照
2019/06/22 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
在pycharm中显示python画的图方法
2019/08/31 Python
Python生成器常见问题及解决方案
2020/03/21 Python
浅析Python 序列化与反序列化
2020/08/05 Python
LINUX下线程,GDI类的解释
2016/12/14 面试题
电子邮箱格式怎么写
2014/01/12 职场文书
策划创业计划书
2014/02/06 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
娱乐节目策划方案
2014/06/10 职场文书
消防宣传口号
2014/06/16 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
交通事故委托书范本
2014/09/28 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
2014年个人委托书范本
2014/10/13 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
养成教育工作总结
2015/08/13 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
Python实现随机生成迷宫并自动寻路
2021/06/13 Python