黑马程序员技术交流社区

标题: 【上海校区】WebSocket是时候展现你优秀的一面了 [打印本页]
作者: 不二晨    时间: 2018-10-23 09:24
标题: 【上海校区】WebSocket是时候展现你优秀的一面了
在工作中我们开发接触最多的协议莫过于HTTP协议了，近些年H5的很多API和技术已经如雨后春笋般开始渐渐发扬光大了，今天我们就来一起讨论下其中的一个比较有意思的API，WebSocket
首先，在介绍主角之前，总要有一个铺垫，那么我就来三言两语先说一下最常见的HTTP协议吧，以示区分
三言两语说说HTTPHTTP是客户端/服务器模式中请求-响应所用的协议，在这种模式中，浏览器向服务器提交HTTP请求，服务器响应请求的资源
言下之意就是你可以把这种模式，想象成对讲机，一个人说，另一个人听
HTTP是半双工通信这种半双工通信的特点就是：
以上就是对HTTP协议的简单概括，那么下面直接开始进入今天的主题
双工通信在H5的websocket出现之前，为了实现这种推送技术，大家最常用的实现方式有这三种：轮询、长轮询和iframe流，但是他们三兄弟或多或少都有些美中不足
于是乎，在大神们的不断努力下，定义了websocket这个好用的API，来完善了双工通信的更好实现方式
WebSocket时代已来，不要错过！！！
WebSocketWebSocket实现了，在客户端和服务端上建立了一个长久的连接，两边可以任意发数据嗨皮
当然如果知道的更深一层的话，要知道它属于应用层的协议，它基于TCP传输协议，并复用HTTP的握手通道

说的再多，不如懂它，下面来看看websocket的优势何在
WebSocket的优势那么废话说到这里了，接下来开始实战，直接检验一下成果
一起敲敲WebSocket我们先来写下前端页面的WebSocket，看看基本用法，上代码，别犹豫
// 创建一个index.html文件// 下面直接写WebSocket// 只需要new一下就可以创建一个websocket的实例// 我们要去连接ws协议// 这里对应的端口就是服务端设置的端口号9999let ws = new WebSocket('ws://localhost:9999');// onopen是客户端与服务端建立连接后触发ws.onopen = function() {    ws.send('哎呦，不错哦');};// onmessage是当服务端给客户端发来消息的时候触发ws.onmessage = function(res) {    console.log(res);   // 打印的是MessageEvent对象    // 真正的消息数据是 res.data    console.log(res.data);};复制代码以上代码，除去注释的话，也就不到10行代码，就把websocket的用法写完了，so easy，使用起来很简单啊，有木有
那么做事要做全，我们再写一下后台那边的websocket接收和发送消息部分吧，继续撸
等等，在撸之前，先要安装一下
// 后台需要安装ws包npm i ws -S复制代码这里我们用node的express来简单搭个后台服务，目录结构也很简单，如下图
下面开始撸这个server.js文件吧
const express = require('express');const app = express();// 设置静态文件夹app.use(express.static(__dirname));// 监听3000端口app.listen(3000);// =============================================// 开始创建一个websocket服务const Server = require('ws').Server;// 这里是设置服务器的端口号，和上面的3000端口不用一致const ws = new Server({ port: 9999 });// 监听服务端和客户端的连接情况ws.on('connection', function(socket) {    // 监听客户端发来的消息    socket.on('message', function(msg) {        console.log(msg);   // 这个就是客户端发来的消息        // 来而不往非礼也，服务端也可以发消息给客户端        socket.send(`这里是服务端对你说的话： ${msg}`);    });});复制代码这样就搭了一个后台服务了，访问localhost:3000后，在控制台就可以看到消息了
看到这里，我们会由衷的发现，无论是前端来写还是后台来写，发现其实都很类似，所以用起来比较流畅，多敲几遍就好了，熟能生巧嘛，哈哈
接下来还没完，由于websocket是H5标准出的东西，老版本的浏览器当然就不能很好的支持了，这时前端就要处理该死的兼容问题了
正因如此，世上才会有了另外一个更好用的库出现，这就是大名鼎鼎的 socket.io
下面趁此雅兴，不要停，继续来学习一下这个全双工通信中的王者吧
socket.io先来看下socket.io的特别有哪些
socket.io的特点好了，看完了特点，那就......
少点套路，多点真诚，废话不说了，直接上手从头撸一遍吧
socket.io安装// 安装在本地项目npm i socket.io -S复制代码启动服务，手写服务端还是用node中的express框架来搭个服务，代码如下
// server.js文件const express = require('express');const app = express();// 设置静态文件夹app.use(express.static(__dirname));// 通过node的http模块来创建一个server服务const server = require('http').createServer(app);// WebSocket是依赖HTTP协议进行握手的const io = require('socket.io')(server);// 监听客户端与服务端的连接io.on('connection', function(socket) {    // send方法来给客户端发消息    socket.send('青花瓷');    // 监听客户端的消息是否接收成功    socket.on('message', function(msg) {        console.log(msg);  // 客户端发来的消息        socket.send('天青色等烟雨，而我在等你' );    });});// 监听3000端口server.listen(3000);复制代码辣么，服务端的代码已经写完了，接下来开始写前端的部分，撸起袖子加油干啊！！！
在服务端运行后，客户端就需要引用一个动态生成的文件路径，路径是固定的直接引用即可(/socket.io/socket.io.js)
// index.html文件...省略// 引用socket.io的js文件<script src="/socket.io/socket.io.js"></script><script>    const socket = io('/');    // 监听与服务器连接成功的事件    socket.on('connect', () => {        console.log('连接成功');        socket.send('周杰伦');    });    // 监听服务端发来的消息    socket.on('message', msg => {        // 这个msg就是传过来的真消息了，不用再msg.data取值了        console.log(`客户端接收到的消息： ${msg}`);      });    // 监听与服务器连接断开事件    socket.on('disconnect', () => {        console.log('连接断开成功');    });</script>复制代码☆ 这里要有个小提示: io创建socket的时候可以接收一个url参数
基本用法就是这些了，还有其他的划分命名空间、加入房间和广播等方法没有讲到，本想继续往下写的
But接下来要讲的，用socket.io做一个聊天室这种大招太耗费内力了，观众看到现在也有点疲惫了



【转载】
作者：chenhongdong
链接：https://juejin.im/post/5bc7f6b96fb9a05d3447eef8



作者: 小影姐姐    时间: 2018-10-25 09:45
作者: 不二晨    时间: 2018-10-25 10:49
作者: 魔都黑马少年梦    时间: 2018-11-1 16:59




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2