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(即时聊天)模块,要用 ...
随机推荐
- 【HP-UNIX】修改HP-UNIX主机名称
原文链接:https://blog.csdn.net/lantianbaiyunbj/article/details/53434537 HP-UX修改主机IP地址 方法一 1.set_parms ho ...
- 学习excel的使用技巧统计文本出现的次数
其实是使用一个函数来完成的 =ifcount(C1:C214,''test123") 统计c1到c214中出现的test123的次数
- SpringCloud系列六：Feign接口转换调用服务（Feign 基本使用、Feign 相关配置）
1.概念:Feign 接口服务 2.具体内容 现在为止所进行的所有的 Rest 服务调用实际上都会出现一个非常尴尬的局面,例如:以如下代码为例: Dept dept = this.restTempla ...
- 2018-2019-2 网络对抗技术 20165304 Exp4 恶意代码分析
2018-2019-2 网络对抗技术 20165304 Exp4 恶意代码分析 原理与实践说明 1.实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或E ...
- Python学习随笔（1）--可视化工具plotly使用
把数据库某列数据取出来,然后再在本地生成html文件形成可视化视图显示 #!/usr/bin/python# coding=utf-8 import pymysqlimport plotly.plot ...
- linux xfs的一次io异常导致的crash
returned. [ blocked seconds.----这个默认是120,该环境上是被人为设置1200 [8556407.425653] "echo 0 > /proc/sys ...
- Dnsmasq 配置PXE批量安装系统
以下测试都是基于centos 7下的环境 需要安装的软件为 nginx 用来下载ks.cfg和系统镜像文件用的,也可以用ftp服务器来代替 dnsmasq 提供dhcp服务和tftp服务,也可以单独去 ...
- MySQL复制相关技术的简单总结
MySQL有很多种复制,至少从概念上来看,传统的主从复制,半同步复制,GTID复制,多线程复制,以及组复制(MGR).咋一看起来很多,各种各样的复制,其实从原理上看,各种复制的原理并无太大的异同.每一 ...
- ARTS打卡计划第二周-Share-使用java注解对方法计时
现在有这样一种常见,系统中有一个接口,该接口执行的方法忽快忽慢,因此你需要去统计改方法的执行时间.刚开始你的代码可能如下: long start = System.currentTimeMillis( ...
- echars踩坑之图表缓存
针对echars 在一个图表内渲染多次数据时,图表会缓存上一次的数据导致下一次的数据图表变形.使用clear()清除图表缓存. 不让页面缓存的方法 按F12打开Network在Disable cach ...