周记1——Nice to meet Websocket

Posted 瓜牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了周记1——Nice to meet Websocket相关的知识,希望对你有一定的参考价值。

  一周复一周,时间过得飞快,每个周末都是很开心却又很彷徨。开心的是不用工作,彷徨的是自己这周学到了什么、自身的技能有没有提高、如何应对这个日新月异的社会...于是决定这周开始写周记,记录自己每周做了哪些事情、收获了什么知识。

  本周的工作的开发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、客户端的 API

  WebSocket 客户端的 API 如下。

 

4.1 WebSocket 构造函数

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

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

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

 

4.2 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.3 WebSocket.onopen

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

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

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

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

 

4.4 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.5 WebSocket.onmessage

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

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

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

 

4.6 webSocket.send()

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

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

 

参考链接:

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

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

 

以上是关于周记1——Nice to meet Websocket的主要内容,如果未能解决你的问题,请参考以下文章

新概念 Lesson 3 Nice to meet you

Linux里面nice值作用是啥?

Java之Stream操作

Java之Stream操作

[Hive] - Beeline 偶发 Unable to read HiveServer2 uri from ZooKeeper 问题

配置redis集群报错Failed to send CLUSTER MEET command.