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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
JS画5角星方法介绍
Sep 17 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
javascript实现文字无缝滚动效果
Aug 26 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
vue+element实现表单校验功能
May 20 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
vue计算属性及使用详解
2018/04/02 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
Python实现的购物车功能示例
2018/02/11 Python
python全栈知识点总结
2019/07/01 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
学习雷锋活动总结
2014/04/29 职场文书
团代会开幕词
2015/01/28 职场文书
五一劳动节慰问信
2015/02/14 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang