node-socket通信

近些年H5的很多API和技术已经如雨后春笋般开始渐渐发扬光大了，今天我们就来学习下其中的一个比较有意思的API，WebSocket

首先，在介绍主角之前，我们先来说一下最常见的HTTP协议吧，以示区分

三言两语说说HTTP

HTTP是客户端/服务器模式中请求-响应所用的协议，在这种模式中，浏览器向服务器提交HTTP请求，服务器响应请求的资源

言下之意就是你可以把这种模式，想象成 对讲机 ，一个人 说 ，另一个人 听

HTTP是半双工通信

这种半双工通信的特点就是：

• 同一时刻 数据是 单向流动 的，客户端向服务端请求数据->单向，服务端向客户端返回数据->单向
• 服务器不能主动的推送数据给客户端

以上就是对HTTP协议的简单概括，那么下面直接开始进入今天的主题

 

 

双工通信

在H5的websocket出现之前，为了实现这种 推送技术 ，大家最常用的实现方式有这三种： 轮询 、 长轮询 和 iframe流 ，但是他们三兄弟或多或少都有些美中不足

于是乎，在大神们的不断努力下，定义了websocket这个好用的API，来完善了双工通信的更好实现方式

WebSocket时代已来，不要错过！！！

 

 

WebSocket

WebSocket实现了，在客户端和服务端上建立了一个 长久的连接 ，两边可以任意发数据嗨皮

当然如果知道的更深一层的话，要知道它属于 应用层 的协议，它 基于TCP 传输协议，并 复用HTTP 的握手通道

转存失败重新上传取消

 

 

WebSocket的优势

1. 支持双向通信，实时性更强(你可以来做个QQ，微信了，老铁)
2. 更好的二进制支持
3. 较少的控制开销(连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较少)

我们先来写下前端页面的WebSocket，看看基本用法

 

// 创建一个index.html文件

// 下面直接写WebSocket

 

// 只需要new一下就可以创建一个websocket的实例

// 我们要去连接ws协议

// 这里对应的端口就是服务端设置的端口号9999

 

//要连接的服务器

let ws = new WebSocket('ws://10.211.55.13:9999');

 

// onopen是客户端与服务端建立连接后触发

ws.onopen = function () {

    ws.send('哎呦，不错哦');

};

 

// onmessage是当服务端给客户端发来消息的时候触发

ws.onmessage = function (res) {

    console.log(res); // 打印的是MessageEvent对象

    // 真正的消息数据是 res.data

    console.log(res.data);

};

 

后台那边的websocket接收和发送消息部分

 

 

// 需要安装ws包 

npm i ws -S

 

server.js文件

 

// =============================================

// 开始创建一个websocket服务

const Server = require('ws').Server;

// 这里是设置服务器的端口号，和上面的3000端口不用一致

const ws = new Server({

    port: 9999,

    host: '自己的ip地址或者127.0.0.1'

});

 

// 监听服务端和客户端的连接情况

ws.on('connection', function (client) {

    // 监听客户端发来的消息

    client.on('message', function (msg) {

        console.log('收到客户端发来的消息：' + msg); // 这个就是客户端发来的消息

        // 来而不往非礼也，服务端也可以发消息给客户端

        client.send(`这里是服务端对你说的话： ${msg}`);

    });

 

 

});

这样就搭了一个后台服务了，打开 index.html   在控制台就可以看到消息了