前言

一直在想要不要写下这篇，因为网上关于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入门及示例的更多相关文章

  1. Spring WebSocket初探2 (Spring WebSocket入门教程)<转>

    See more: Spring WebSocket reference整个例子属于WiseMenuFrameWork的一部分,可以将整个项目Clone下来,如果朋友们有需求,我可以整理一个独立的de ...

  2. WebSocket入门教程（五）-- WebSocket实例：简单多人聊天室

    from:https://blog.csdn.net/u010136741/article/details/51612594 [总目录]   WebSocket入门教程--大纲   [实例简介]   ...

  3. C# 实现WEBSOCKET聊天应用示例

    C# 实现WEBSOCKET聊天应用示例 http://blog.163.com/da7_1@126/blog/static/10407267820121016103055506/ 2012-11-1 ...

  4. Python开发 之 Websocket 的使用示例

    1.唠唠叨叨 最近又回顾了下Websocket,发现已经忘的七七八八了.于是用js写了客户端,用python写了服务端,来复习一下这方面的知识. 2.先看一下效果吧 2.1.效果1(一个客户端连上服务 ...

  5. C# WebSocket 服务端示例代码 + HTML5客户端示例代码

    WebSocket服务端 C#示例代码 using System; using System.Collections.Generic; using System.Linq; using System. ...

  6. Spring MVC 入门教程示例 （一）

    今天和大家分享下  Spring MVC  入门教程 首先还是从 HelloWorld  web 工程开始 -------------------------- 1.首先创建一个Maven Web工程 ...

  7. NetCore WebSocket 即时通讯示例

    1.新建Netcore Web项目 2.创建简易通讯协议 public class MsgTemplate { public string SenderID { get; set; } public ...

  8. wxPython 入门开发示例

    1.背景资料 wxPython API:https://www.wxpython.org/Phoenix/docs/html/ 2.入门示例 wxPython最重要的两个概念:App与Frame,其中 ...

  9. 周记1——WebSocket入门

    一周复一周,时间过得飞快,每个周末都是很开心却又很彷徨.开心的是不用工作,彷徨的是自己这周学到了什么.自身的技能有没有提高.如何应对这个日新月异的社会... 本周的工作的开发IM(即时聊天)模块,要用 ...

随机推荐

  1. 最大化及等比例测试演化Demo-Grid方法

    Demo1-简单测试: <!doctype html> <html> <head> <meta charset="utf-8"> & ...

  2. 错误 88 error C2248: “CObject::CObject”: 无法访问 private 成员(在“CObject”类中声明) c:\program files (x86)\microsoft visual studio 9.0\vc\atlmfc\include\afxcoll.h 590

    最近接收了以前新公司遗留的代码,一个函数动不动就少的一千行,多的几千行,真是受不了这编码风格! 于是便使用了VS自带的重构工具,选择代码后右键-重构-提取方法,提取完方法就编译不过,想了好久原因,原来 ...

  3. webstorm2016.3注册码，License server更新方式，webstorm2017.1版本可用

    以前的webstorm和phpstorm的激活码和地址,今天打开的时候过期了 (your license has expored) 以前是用activation code的更新方式: 后来搜了下,换个 ...

  4. python slenium 中CSS定位

    以百度为例 一.通过id.class定位 1.#id:python:driver.find_element_by_css_selector('input#kw') 2..class:python:dr ...

  5. Redis Sentinel实现高可用配置

    一般情况下yum安装redis的启动目录在:”/usr/sbin” :配置目录在”/etc/redis/”在其目录下会有默认的redis.conf和redis-sentinel.conf redis高 ...

  6. oracle填坑之PLSQL中文显示为问号

    刚入坑oracle就遇到个坑. 坑描述: 系统:Windows7 oracle:同时安装,11g和12c(安装顺序,先装的12c然后装的11g) 坑:开始安装的12c用SQL Developer使用本 ...

  7. ubuntu下多版本OpenCV的共存与使用

    首先,OpenCV历史版本下载:https://www.opencv.org/releases.html 一.把不同版本的OpenCV安装在不同位置 下载好OpenCV源码,在安装之前打开CMakeL ...

  8. eShopOnContainers 看微服务③：Identity Service

    引言 通常,服务所公开的资源和 API 必须仅限受信任的特定用户和客户端访问.那进行 API 级别信任决策的第一步就是身份认证——确定用户身份是否可靠. 在微服务场景中,身份认证通常统一处理.一般有两 ...

  9. leetcode每日刷题计划-简单篇day10

    跳题,不熟悉的留到周末再做. 保持冷静,不信画饼. num 100 相同的树 Same Tree 做法可能不是特别简洁,注意一下.最后判断完子树以后,要确定根的数值是一样的 然后在isleaf的判定先 ...

  10. 创建只读账号oracle

    1.创建用户,指定哪个表空间create user test2 identified by "123" default tablespace BDCDJ_XC temporary ...