400-700-1307

webscoket的demo实现

2019-01-29 16:18

WebSocket 是什么

WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。

WebSocket同样是HTML 5规范的组成部分之一,现标准版本为 RFC 6455。WebSocket 相较于上述几种连接方式,实现原理较为复杂,用一句话概括就是:客户端向 WebSocket 服务器通知(notify)一个带有所有 接收者ID(recipients IDs)的事件(event),服务器接收后立即通知所有活跃的(active)客户端,只有ID在接收者ID序列中的客户端才会处理这个事件。由于 WebSocket 本身是基于TCP协议的,所以在服务器端我们可以采用构建 TCP Socket 服务器的方式来构建 WebSocket 服务器。

WebSocket 是一种全新的协议。它将 TCP 的 Socket(套接字)应用在了web page上,从而使通信双方建立起一个保持在活动状态连接通道,并且属于全双工(双方同时进行双向通信)。

WebSocket 协议是借用 HTTP协议 的 101 switch protocol 来达到协议转换的,从HTTP协议切换成WebSocket通信协议。

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

  • 建立在 TCP 协议之上,服务器端的实现比较容易。
  • 与 HTTP 协议有着良好的兼容性。默认端口也是 80 和 443 ,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
  • 数据格式比较轻量,性能开销小,通信高效。
  • 可以发送文本,也可以发送二进制数据。
  • 没有同源限制,客户端可以与任意服务器通信。
  • 协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

WebSocket协议被设计来取代现有的使用HTTP作为传输层的双向通信技术,并受益于现有的基础设施(代理、过滤、身份验证)。

概述

本协议有两部分:握手和数据传输。

概述一个简单的demo

一、node 安装 npm install ws

服务端代码:启动服务,接收传来的信息,每隔2s返回数据。

实际使用的时候需要异常处理

 1 var WebSocketServer = require('ws').Server,
 2 wss = new WebSocketServer({ port: 8181 });
 3 wss.on('connection', function (ws) {
 4 console.log('client connected');
 5 ws.on('message', function (message) {
 6 console.log(message);
 7 var timer = setInterval(function(){
 8 ws.send(message+timer);
 9 },2000)
10 });
11 });

 

二、客户端代码 连接后监听端口

//即时通讯

 1 function openWebSocket(){

 2 
 3 if ('WebSocket' in window){
 4 var ws = new WebSocket("ws://localhost:8181");
 5 //连接成功建立的回调方法
 6 ws.onopen = function () {
 7 console.log("WebSocket连接成功");
 8 }
 9 //接收到消息的回调方法
10 ws.onmessage = function (event) {
11 console.log(event.data);
12 }
13 //连接关闭的回调方法
14 ws.onclose = function () {
15 console.log("WebSocket连接关闭");
16 }
17 //关闭WebSocket连接
18 function closeWebSocket() {
19 ws.close();
20 }
21 //发送消息
22 function send(message,key) {
23 if(ws.readyState===1){
24 ws.send(message);
25 }else{
26 if(key != 0){
27 key = key==undefined?3:key;
28 setTimeout(function(){
29 send(message,key);
30 },500);
31 }else{
32 console.log('连接未完成,发生失败');
33 }
34 }
35 }
36 //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
37 window.onbeforeunload = function () {
38 closeWebSocket();
39 }
40 send('这是什么');
41 }else{
42 console.log('不支持通信');
43 }
44 }
45 openWebSocket();

开班信息

当前校区

北京校区
  • 北京校区
  • 上海校区
  • 广州校区
  • 沈阳校区
  • 杭州校区
  • 南京校区
  • 郑州校区
  • 成都校区
  • 深圳校区
  • 西安校区
  • 苏州校区
  • 深圳沙井
  • 深圳观澜
  • 深圳龙岗
  • 武汉校区
  • 西宁校区
  • 石家庄校区
  • 湖北咸宁
  • 广东惠州
  • 广东佛山

                    Copyright © 2007-2019 IT兄弟连教育 版权所有 京ICP备11018177号  京公网安备 11010802026987号