学习WebSocket(附: WebSocket + koa例子)

本文深入探讨了WebSocket协议,一种使客户端与服务器之间能够进行全双工通信的技术。通过对比HTTP,展示了WebSocket如何简化数据交换流程,允许服务器主动向客户端推送数据。文章提供了客户端和服务端的实现代码示例,并解释了握手过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原文地址
github项目地址

1. 什么是WebSocket?

WebSocket是一种在单个TCP连接上进行全双工通信的协议。
使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。
在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

2. 优点(参考维基)

WebSocket与HTTP对比图

客户端例子

    const ws = new WebSocket('ws://localhost:8888');

    ws.onopen = () => {
        console.log('WebSocket onopen');
    }

    ws.onmessage = e => {
        console.log('WebSocket onmessage');
        console.log('WebSocket message received:', e);
        console.log('WebSocket data received:', e.data);
    }

    ws.onclose = e => {
        console.log("WebSocket onclose");
    };
复制代码
  1. WebSocket.onopen: 连接成功后调用
  2. WebSocket.onmessage: 当接收到服务器消息时调用
  3. WebSocket.onclose: 连接关闭后调用

服务端例子(koa)

  const Koa = require('koa');
  const WebSocket = require('ws');

  const app = new Koa();
  const ws = new WebSocket.Server({port: 8888});

  ws.on('connection', ws => {
      console.log('server connection');

      ws.on('message', msg => {
        console.log('server receive msg:', msg);
      });

      ws.send('Information from the server');
  });

  app.listen(3000);
复制代码

运行结果

客户端

WebSocket客户端运行结果

服务端

WebSocket服务端运行结果

名词解释

  1. 握手: 一般创建WebSocket链接, 需要通过浏览器发出请求,服务器做出回应, 这个过程称为“握手”

参考链接

WebSocket协议:5分钟从入门到精通
MDN

转载于:https://juejin.im/post/5c6aaab56fb9a049a62d2368

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值