小舞很执着

这个屌丝很懒，什么也没留下！

热门标签

黑马头条vue2.0项目实战（十）——小智同学

作者：小舞很执着 | 2024-08-22 00:24:21

踩

1. WebSocket

2. 使用原生 WebSocket（了解）

1. WebSocket

WebSocket 是一种数据通信协议，也是用于客户端和服务端数据通信，类似于我们常见的 http
既然有 http，为啥还要 WebSocket
http 通信是单向的
- 请求 + 响应
- 没有请求也就没有响应

初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？

答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。

举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用“轮询”：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。

轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。

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

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

简单理解：

HTTP 打电话：

我问一句
你回答一句
没有提问就没有回答，即便对方主动给你说话，我也是个聋子听不见

WebSocket 打电话：

双向对话

HTTP 和 WebSocket 通信模型

其他特点包括：

（1）和 HTTP 一样属于应用层协议，也是建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是 80 和 443，并且握手阶段（第 1 次建立连接）采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源跨域限制，客户端可以与任意服务器通信。

WebSocket 不是用来代替 HTTP 的，它是用来解决实时通信的业务场景。如果业务不需要实时性，那就没必要使用 WebSocket。
WebSocket 也是有资源消耗的，因为它要实时通信，也是需要和服务端保持一定的通信连接。
WebSocket 也是需要服务端配合才能使用。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

（7）浏览器专门为 WebSocket 通信提供了一个请求对象 WebSocket

XmlHttpRequest 请求对象，发起 HTTP 协议请求

2. 使用原生 WebSocket（了解）

参考文档：

MDN - WebSocket

浏览器为 HTTP 通信提供了 XmlHttpRequest 对象，同样的，也为 WebSocket 通信提供了一个通信操作接口：WebSocket。

通信模型：

拨号（建立连接）
通话（双向通信）
结束通话（关闭连接）

怎么查看 WebSocket 请求日志：

朝上的绿色箭头是发出去的消息
朝上的绿色箭头是发出去的消息

3. Socket.IO（了解体验）

3.1 介绍

原生的 WebSocket 使用比较麻烦，所以推荐使用一个封装好的解决方案：socket.io
socket.io 提供了服务端 + 客户端的实现
- 客户端：浏览器
- 服务端：Java、Python、PHP、。。。。Node.js
对于前端开发者来说，只需要关心她的客户端如何使用即可
注意：Socket.io 必须前后端配套使用
- 实际工作中，socket.io 已经成为了各大后端开发的 WebSocket 通信主流解决方案
GitHub 仓库
官网

Socket.io 和 WebSocket 就好比它就好比 axios 和 XMLHTTPRequest 的关系。

3.2 基本使用

官方的 Hello World：https://socket.io/get-started/chat/。

服务端代码：


var app = require("express")();
var http = require("http").createServer(app);
var io = require("socket.io")(http);
 
app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});
 
io.on("connection", function(socket) {
  socket.on("disconnect", function() {
    console.log("user disconnected");
  });
 
  socket.on("chat message", function(msg) {
    io.emit("chat message", msg);
  });
});
 
http.listen(3000, "0.0.0.0", function() {
  console.log("listening on *:3000");
});

客户端代码：


<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font: 13px Helvetica, Arial;
      }
      form {
        background: #000;
        padding: 3px;
        position: fixed;
        bottom: 0;
        width: 100%;
      }
      form input {
        border: 0;
        padding: 10px;
        width: 90%;
        margin-right: 0.5%;
      }
      form button {
        width: 9%;
        background: rgb(130, 224, 255);
        border: none;
        padding: 10px;
      }
      #messages {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      #messages li {
        padding: 5px 10px;
      }
      #messages li:nth-child(odd) {
        background: #eee;
      }
    </style>
  </head>
  <body>
    <!-- 消息列表 -->
    <ul id="messages"></ul>
 
    <!-- 发送消息的表单 -->
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
 
    <!-- SocketIO 提供了一个客户端实现：socket.io.js -->
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      // 建立连接，得到 socket 通信对象
      var socket = io();
 
      socket.on("connect", () => {
        console.log("建立连接成功了");
      });
 
      $("form").submit(function(e) {
        e.preventDefault(); // prevents page reloading
        socket.emit("chat message", $("#m").val());
        $("#m").val("");
        return false;
      });
 
      socket.on("chat message", function(msg) {
        $("#messages").append($("<li>").text(msg));
      });
    </script>
  </body>
</html>

3.3 总结

我们只需要关注客户端怎么使用：

怎么建立连接
怎么发送消息
怎么接收消息

客户端使用步骤：

下载引入
- npm install socket.io-client 或者 yarn add socket.io-client
- import { io } from "socket.io-client"
建立连接

发送消息


// 发送指定类型的消息
// 数据可以是任何类型
socket.emit("消息类型", 数据);

接收消息


// 消息类型
// 回调函数参数获取消息数据
socket.on("消息类型", data => {
  console.log(data);
});

消息类型由后端给出，他会告诉你收发消息的类型，就好比 HTTP 接口中的请求路径一样。

4. 小智同学

4.1 准备

① 创建 views/user-chat/index.vue 。

② 配置路由：

③ 最后，在我的页面中点击 “小智同学” 跳转到聊天页面：

4.2 页面布局

导航栏

消息列表

发送消息

4.3 建立连接

步骤：

安装
- https://github.com/socketio/socket.io-client

导入
建立连接

① 安装依赖

yarn add socket.io-client 或者 npm i socket.io-client

② 在初始化的时候建立连接

接口说明

获取用户token

4.4 收发消息

4.5 展示消息列表

① 模版绑定

② 聊天消息本地持久化

侦听消息列表数组的改变

4.6 消息列表自动滚动到底部

让聊天的信息列表滚动到底部，这个函数的目的是确保用户始终能够看到最新的内容。
scrollTop 是一个属性，用于设置或返回滚动区域顶部的偏移量。
scrollHeight 是一个属性，表示滚动区域的整个内容的高度，包括超出视口的部分。
公式：DOM.scrollTop = DOM.scrollHeight
将 scrollTop 设置为 scrollHeight 可以确保滚动区域滚动到内容的最底部。

① 设置聊天消息列表滚动容器，具体操作参考——黑马头条vue2.0项目实战（四）——首页—文章列表——3.6 记住列表的滚动位置

② 让聊天的信息列表滚动到底部

③ 更新视图的时候立即执行一遍

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/1013890