node + koa + websocket 开发即时通讯聊天室（一）

最新推荐文章于 2024-03-17 22:45:16 发布

luckybing~

最新推荐文章于 2024-03-17 22:45:16 发布

阅读量1.1k

点赞数

分类专栏：面试梳理

本文链接：https://blog.csdn.net/Luckyzhoufangbing/article/details/110118811

版权

面试梳理专栏收录该内容

30 篇文章 0 订阅

订阅专栏

（一）通讯过程

红色就是消息流动过程，A给B发送消息，A先发给服务器，服务器再发给B，B 回复 A 的消息，B 将消息先发给服务器，服务器将消息发送给A

（二）什么是 websocket

（1）websocket 协议是基于 TCP 的一种新的网络协议，它实现了浏览器与服务器的全双工通信（全双工通信：浏览器既可以主动给服务端发消息，服务券也可以主动给浏览器发消息）

而 http 是无法实现这种功能的，http 是发送 ---> 请求流程，如果不发送请求，服务端是不能主动给浏览器发消息的

websocket 是一种持久协议（长链接），http是非持久协议（每次服务器发送一个对象后相关的TCP连接就被关闭，也就是说每个连接没有持续到可以传输其他对象。每个TCP连接只能传送一个请求消息和响应消息）

（2）传统的聊天方式

传统的聊天采用 ajax 轮询的方式，（http 方式）采用定时器，向服务器发送请求，但是这样对服务器性能不好，浪费性能和资源

（3）websocket 使用场景：客服、在线聊天等等；

（三）h5 中新增的 websocket API

客户端

// WebSocket 事件

// open: 连接建立时触发

// message: 客户端接受服务端数据时触发

// error: 通信发生错误时触发

// close: 连接关闭时触发

// WebSocket 方法

// 1. Socket.send() 发送数据

// 2. Socket.close() 关闭连接

html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>websocket</title>
  <style>
    #message_list {
      border: 1px solid black;
      padding: 10px;
      width: 200px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <!-- 输入框 -->
  <input type="text" id="input">
  <!-- 发送按钮 -->
  <button id="btn">发送消息</button>
  <!-- 消息列表 -->
  <div id="message_list"></div>
  <script src="./index.js"></script>
</body>
</html>

1. 首先建立连接

var button = document.getElementById('btn')
var input = document.getElementById('input')
var messageList = document.getElementById('message_list')

// websocket 是一个构造函数 使用时候 new 一下
// 参数：websocket 的服务地址
// 现在这个地址是官方自带的 后续会自己写一个
let websocket = new WebSocket('ws://echo.websocket.org')

// 连接建立
websocket.addEventListener('open', () => {
  messageList.innerHTML = '连接成功'
})

当刷新页面，连接已成功：

2. 点击按钮发送消息

// 点击发送消息按钮 将输入框中的内容发送
button.addEventListener('click', () => {
  websocket.send(input.value)
})

Network 中 WS 指的就是 websocket 连接，左侧 Name 一栏 echo.websocket.org 就是 websocket 的连接建立，进行的一个长连接，当发送的时候，所有数据都会在这个连接里

绿色的是发送消息，红色的是服务端响应消息，默认是发什么回什么

3. 接受 websocket 回复的消息

// 客户端接受服务端数据
websocket.addEventListener('message', (message) => {
  console.log('message', message)
  messageList.innerHTML = message.data
})

可见服务端回复的数据在 data 字段里面，回复的消息也渲染在了消息框中

4. 监听通信发生错误/连接关闭

// 通信发生错误
websocket.addEventListener('error', () => {
  console.log('websocket error')
})

// 连接关闭
websocket.addEventListener('close', () => {
  console.log('websocket closed')
})

以上就是 h5 websocket 的 API 使用

luckybing~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node + koa + websocket 开发即时通讯聊天室（一）

（一）通讯过程红色就是消息流动过程，A给B发送消息，A先发给服务器，服务器再发给B，B 回复 A 的消息，B 将消息先发给服务器，服务器将消息发送给A（二）什么是 websocket（1）websocket 协议是基于 TCP 的一种新的网络协议，它实现了浏览器与服务器的全双工通信（全双工通信：浏览器既可以主动给服务端发消息，服务券也可以主动给浏览器发消息）而 http 是无法实现这种功能的，http 是发送 ---> 请求流程，如果不发送请求，服务端是不能主动给浏览器.
复制链接

扫一扫