简说websocket

最新推荐文章于 2025-03-11 10:03:21 发布

weixin_34128839

最新推荐文章于 2025-03-11 10:03:21 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

文章标签：网络前端 javascript ViewUI

原文链接：https://juejin.im/post/5cd78a776fb9a032447f1682

一，什么是websocket?

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

有人会问：我们已经有了 HTTP 协议，
为什么还需要另一个协议？它能带来什么好处？

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

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

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

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

二，websocket用来干什么?

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

三，简要实现一个websocket

html页面

// 创建一个index.html文件
// 下面直接写WebSocket

// 只需要new一下就可以创建一个websocket的实例
// 我们要去连接ws协议

// 这里对应的端口就是服务端设置的端口号9999
let 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);
};

复制代码

下面开始撸node.js这个server.js服务文件吧

// 后台需要安装ws包
// npm i ws -S

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}`);
    });
});
复制代码