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

  本周的工作的开发IM(即时聊天)模块,要用到的技术是WebSocket。由于刚接触WebSocket,自己也是边摸索边做...

1、Websocket是什么

  WebSocket是HTML5下一种新的协议,为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接,此后服务端与客户端通过此TCP连接进行实时通信,能更好的节省服务器资源和带宽并达到实时通讯的目的。但是它和HTTP最大不同是:

WebSocket是一种双向通信协议。在建立连接后,WebSocket服务器端和客户端都能主动向对方发送或接收数据,就像Socket一样;
WebSocket需要像TCP一样,先建立连接,连接成功后才能相互通信。

它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

其他特点包括:

(1)建立在 TCP 协议之上,服务器端的实现比较容易。

(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。

(3)数据格式比较轻量,性能开销小,通信高效。

(4)可以发送文本,也可以发送二进制数据。

(5)没有同源限制,客户端可以与任意服务器通信。

(6)协议标识符是ws(如果加密,则为 wss),服务器网址就是 URL。

ws://example.com:80/some/path

2、Websocket的引用场景

  社交聊天、多玩家游戏、弹幕、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、基于位置的应用、在线教育、智能家居等,都需要高实时的场景。

3、客户端的简单实例

  WebSocket 的用法相当简单。

  下面是一个网页脚本的例子(点击这里看运行结果),基本上一眼就能明白。(例子连接不成功可能是网络代理等问题)

var ws = new WebSocket("wss://echo.websocket.org");

// 建立连接后的回调
ws.onopen = function(evt) {
console.log("Connection open ...");
ws.send("Hello WebSockets!");
}; // 收到服务端(websocket)消息后的回调
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
ws.close();
}; // 关闭连接后的回调函数 -- 断网不会触发这个事件!!!
ws.onclose = function(evt) {
console.log("Connection closed.");
};

4、WebSocket属性和方法

WebSocket 构造函数

  WebSocket 对象作为一个构造函数,用于新建 WebSocket 实例。

// 执行下面语句之后,客户端就会与服务器进行连接。
var ws = new WebSocket('ws://localhost:8080');

  实例对象的所有属性和方法清单,参见这里

4.1 WebSocket.readyState

  readyState属性返回实例对象的当前状态,共有四种。

CONNECTING:值为0,表示正在连接。
OPEN:值为1,表示连接成功,可以通信了。
CLOSING:值为2,表示连接正在关闭。
CLOSED:值为3,表示连接已经关闭,或者打开连接失败。

下面是一个示例。

switch (ws.readyState) {
case WebSocket.CONNECTING:
// do something
break;
case WebSocket.OPEN:
// do something
break;
case WebSocket.CLOSING:
// do something
break;
case WebSocket.CLOSED:
// do something
break;
default:
// this never happens
break;
}

4.2WebSocket.onopen

  实例对象的onopen属性,用于指定连接成功后的回调函数。

ws.onopen = function () {
ws.send('Hello Server!');
}

  如果要指定多个回调函数,可以使用addEventListener方法。

ws.addEventListener('open', function (event) {
ws.send('Hello Server!');
});

4.3 WebSocket.onclose

  实例对象的onclose属性,用于指定连接关闭后的回调函数。

ws.onclose = function(event) {
var code = event.code;
var reason = event.reason;
var wasClean = event.wasClean;
// handle close event
}; ws.addEventListener("close", function(event) {
var code = event.code;
var reason = event.reason;
var wasClean = event.wasClean;
// handle close event
});

4.4 WebSocket.onmessage

  实例对象的onmessage属性,用于指定收到服务器数据后的回调函数。

ws.onmessage = function(event) {
var data = event.data;
// 处理数据
}; ws.addEventListener("message", function(event) {
var data = event.data;
// 处理数据
});

4.5 webSocket.send()

  实例对象的 send() 方法用于向服务器发送数据。

  发送文本的例子: ws.send('your message');

参考链接:

阮一峰WebSocket教程:

http://www.ruanyifeng.com/blog/2017/05/websocket.html

WebSocket实现IM:

http://www.fly63.com/article/detial/64

https://www.cnblogs.com/chunguang/p/5706376.html

WebSocket心跳机制:

https://www.cnblogs.com/tugenhua0707/p/8648044.html

周记1——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. websocket入门案例(echo)

    websocket是用来干什么的,具体的请自行百度. 本文实现一个简单的websocket的入门小例子,实现客户端发送一句换,服务器端返回.即一个简单的交互. 一.服务器端的实现 1.创建一个类实现S ...

  4. Nodejs websocket入门

    websocket 2011年技术文档 http://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/index.html 浏览器端接 ...

  5. WebSocket入门及示例

    前言 一直在想要不要写下这篇,因为网上关于websocket的介绍和使用的好文实在太多太多,例如有这篇和这篇. 但我不管了,写下来,这样我就不用在想使用的时候总是去翻写过的源码了. 先回答几个简单的问 ...

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

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

  7. Netty学习第四节WebSocket入门

    1.什么是webSocket?       webSocket是H5提出的一个协议规范,webSocket约定了一个通信的规范,通过一个握手的机制,客户端和服务端,就能建立一个类似TCP的连接,从而方 ...

  8. webSocket入门

    原理:Pub-Sub(发布和订阅) 它适用于发送者将数据(发布者)发送给抽象数量的收件人(订阅者),而无需指定他们是谁. 1.是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议 ...

  9. Spring WebSocket入门(二) 转载

    本文转载自:http://www.jianshu.com/p/8500ad65eb50 WebSocket前端准备 前端我们需要用到两个js文件:sockjs.js和stomp.js SockJS:S ...

随机推荐

  1. 从头开始学eShopOnContainers——设置WebSPA单页应用程序

    一.简介 Web SPA单页应用程序需要一些额外的步骤才能使其工作,因为它需要在生成Docker镜像之前构建JavaScript框架依赖项和JS代码. 二.安装基础环境 1.安装NPM 为了能够使用n ...

  2. Python数据聚合和分组运算(1)-GroupBy Mechanics

    前言 Python的pandas包提供的数据聚合与分组运算功能很强大,也很灵活.<Python for Data Analysis>这本书第9章详细的介绍了这方面的用法,但是有些细节不常用 ...

  3. Educational Codeforces Round 61 (Rated for Div. 2) G(线段树,单调栈)

    #include<bits/stdc++.h>using namespace std;int st[1000007];int top;int s[1000007],t[1000007];i ...

  4. Maven配置与安装

    最近重装了一下系统,便重新安装与配置了maven,记录这个过程并分享出来. 注意:maven安装需要Java依赖,我这里使用的是jdk1.8. 1.安装并配置环境变量 首先在 maven 官网下载 m ...

  5. servlet 核心技术

    servlet 核心技术 servlet 生命周期 在 servlet 生命周期中,servlet 容器完成加载 servlet 类和实例化一个 servlet 实例,并通过3个方法来完成生命周期中的 ...

  6. 【bzoj3576】[Hnoi2014]江南乐 数论分块+博弈论

    Description 小A是一个名副其实的狂热的回合制游戏玩家.在获得了许多回合制游戏的世界级奖项之后,小A有一天突然想起了他小时候在江南玩过的一个回合制游戏. 游戏的规则是这样的,首先给定一个数F ...

  7. LVS解决高并发,大数据量

    http://www.360doc.com/content/14/0726/00/11962419_397102114.shtml LVS的全称Linux vitual system,是由目前阿里巴巴 ...

  8. Deploy Flask app to Apache on Windows

    内容已过期,分割线以下为原文存档. 故事背景 这次我需要将一个Flask应用部署到本地的Windows服务器上.操作系统是64位的,程序是基于Python 3开发的,大体就是这样. 部署选项 根据Fl ...

  9. 条目四《用empty来代替检查size()是否为0》

    条目四<用empty来代替检查size()是否为0> 首先先说结论: empty()实现为内联函数.(众所周知, 优秀的内联函数的效率比一般函数是高的) 在stl标准库中,empty()对 ...

  10. COCO2018 全景分割

    全景分割是18年新推出的一个任务,它要求同时分割出目标和背景,也就是既有实例分割也有语义分割,用官方的话讲是朝着真实世界视觉系统的重要一步 如图所示,里面既有对天空,草地等stuff的分割,也有对目标 ...