WebSocket入门及示例
前言
一直在想要不要写下这篇，因为网上关于websocket的介绍和使用的好文实在太多太多，例如有这篇和这篇。
但我不管了，写下来，这样我就不用在想使用的时候总是去翻写过的源码了。
先回答几个简单的问题。
什么是websocket？websocket有什么用？什么时候用websocket？
这几个问题一起回答。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
全双工的意思差不多就是客户端可以向服务器通信，服务器也可以向客户端通信，
而以前使用的HTTP协议只能客户端向服务器通信，如果想要得到服务器的消息，只能不断地向服务器发起请求，
然而实在没什么消息的话，不断发请求实则是一种资源浪费，所以这种时候就需要使用websocket了。
websocket能保持一种长连接，而且服务器能主动向客户端发消息，对于那种需要保持长时间联系的场景那再适合不过了！
示例
websocket的使用非常的简单，下面是一个实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>websocket</title>
</head>
<body>
<button id="openWS">连接</button>
<button id="closeWS">关闭</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> var ws; // 先创建一个全局变量 $('#openWS').click(function(){ // 创建websocket的实例
// 实例一旦成功创建就会建立websocket连接
ws = new WebSocket('ws://xxx.com'); }); // 主动关闭连接
$('#closeWS').click(function(){
ws.close();
}); // 监听打开
ws.onopen = function() {
console.log('连接成功');
// 做你想做的事
}; // 监听错误
ws.onerror = function(){
console.log('连接失败');
// 做你想做的事
}; // 监听消息
ws.onmessage = function(data) {
console.log(data);
// 做你想做的事
}; // 监听窗口关闭 在窗口关闭前自动关闭连接
ws.onbeforeunload = function(){
ws.close();
}; // 监听关闭
ws.onclose = function() {
console.log('连接关闭');
// 做你想做的事
}; // 在建立websocket连接之后，就可以向服务器发送消息
var data = '我想告诉你';
ws.send(data); </script>
</body>
</html>
更多的实例属性和方法点这里。
WebSocket入门及示例的更多相关文章
- Spring WebSocket初探2 (Spring WebSocket入门教程)<转>
See more: Spring WebSocket reference整个例子属于WiseMenuFrameWork的一部分,可以将整个项目Clone下来,如果朋友们有需求,我可以整理一个独立的de ...
- WebSocket入门教程（五）-- WebSocket实例：简单多人聊天室
from:https://blog.csdn.net/u010136741/article/details/51612594 [总目录] WebSocket入门教程--大纲 [实例简介] ...
- C# 实现WEBSOCKET聊天应用示例
C# 实现WEBSOCKET聊天应用示例 http://blog.163.com/da7_1@126/blog/static/10407267820121016103055506/ 2012-11-1 ...
- Python开发 之 Websocket 的使用示例
1.唠唠叨叨 最近又回顾了下Websocket,发现已经忘的七七八八了.于是用js写了客户端,用python写了服务端,来复习一下这方面的知识. 2.先看一下效果吧 2.1.效果1(一个客户端连上服务 ...
- C# WebSocket 服务端示例代码 + HTML5客户端示例代码
WebSocket服务端 C#示例代码 using System; using System.Collections.Generic; using System.Linq; using System. ...
- Spring MVC 入门教程示例 （一）
今天和大家分享下 Spring MVC 入门教程 首先还是从 HelloWorld web 工程开始 -------------------------- 1.首先创建一个Maven Web工程 ...
- NetCore WebSocket 即时通讯示例
1.新建Netcore Web项目 2.创建简易通讯协议 public class MsgTemplate { public string SenderID { get; set; } public ...
- wxPython 入门开发示例
1.背景资料 wxPython API:https://www.wxpython.org/Phoenix/docs/html/ 2.入门示例 wxPython最重要的两个概念:App与Frame,其中 ...
- 周记1——WebSocket入门
一周复一周,时间过得飞快,每个周末都是很开心却又很彷徨.开心的是不用工作,彷徨的是自己这周学到了什么.自身的技能有没有提高.如何应对这个日新月异的社会... 本周的工作的开发IM(即时聊天)模块,要用 ...
随机推荐
- Windows下虚拟机安装Mac OS X —– VMware Workstation12安装Mac OS X 10.11
1下载 镜像:Instal OS X Yosemite 10.10.3(14D131).cdr 密码:qhhm 2 unlocker208文件(链接:https://pan.baidu ...
- Error occurred during initialization of VM Could not reserve enough space for object heap
Error occurred during initialization of VM Could not reserve enough space for object heap Java虚拟机(JV ...
- oracle入坑日记<二>认识oracle（含sqlplus基础使用）
1.SID(数据库实例) 1.1. oracle安装的时候有一项叫[全局数据库名]的填写项,这个就是oracle的SID也是数据库的唯一标识符: 1.2.一个oracle数据库有且只有一个SID(一般 ...
- iframe高度宽度自适应
iframe { width: 100%; height: 100%; border: none; position: inherit; } 网上全是js方法,而且略显臃肿,故找到了一个css方法,宽 ...
- 在windows 10 上使用aspnet_regiis.exe -i 命令报 “此操作系统版本不支持此选项” 的解决办法
用CMD窗口在C:\Windows\Microsoft.NET\Framework64\v4.0.30319下使用命令aspnet_regiis -i 报错: “此操作系统版本不支持此选项” .结果是 ...
- php把网络图片转Base64编码。
/** 把网络图片图片转成base64 * @param string $img 图片地址 * @return string */ /*网络图片转为base64编码*/ function imgtob ...
- 通过shell操作串口
1. 通过stty工具设置串口参数,例如 stty -F /dev/ttyUSB0 raw speed 9600 -echo min 0 time 10 上例设置了ttyUSB0设备的数据流格式为ra ...
- django之注册登录
清理session数据,自此django的认证登陆登出功能完成,但是此处有个问题,就是当用户在手动关闭浏览器的时候,session数据不会自动失效,数据库的session数据也不会自动删除,所以需要在 ...
- Monkey测试简介
1.Monkey测试简介monkey是安卓命令行工具,它向系统发送伪随机的用户事件,例如:按键的输入.触摸屏的输入.手势输入等操作来对设备上的程序进行压力测试,检测程序多久的时间会发生异常.因此,mo ...
- 多线程服务端与客户端通信(IO是阻塞的)_02
下面是多线程的;每次服务端接受请求,会创建一个线程专门处理这个请求: 虽然是多线程的,但还是阻塞,相当于单线程处理模式 public class TimeServer { public static ...