WebSocket(简单体验版)

简介: WebSocket(简单体验版)

简介

Web Socket(套接字):就是通过一个长时连接实现与服务器全双工、双向的通信。

Web Socket使用的并不是HTTP协议而是自定义的Web Socket协议,所以如果我们使用Web Socket的时候,URL不再是http://https://,而是ws://wss://(但是,实际上是看红宝书才想着玩一下下,在开发中还没试过用这个来开发的)

主要特点:服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息。

使用

实例化

要创建一个新的Web Socket,首先需要实例化一个WebSocket对象。

我们实例化WebSocket对象时,传的参数应该是一个绝对URL同源策略不适用于WebSocket

const socket = new WebSocket("ws://localhost:8088/mysocket");

image-20220529170446392

http请求会有跨域,但是WebSocket不会跨域

后端express

主要部分都注释了(需要安装 express-ws)

const express = require('express')
const expressWs = require('express-ws')

const app = express()

// 将WebSocket服务加到app里,简单来说就是让app添加了ws方法
expressWs(app)

// 建立WebSocket服务
app.ws('/mysocket', function (ws) {
  // ws:建立WebSocket的实例
    
  // 向客户端发送信息
  ws.send('你连接成功啦')
})

app.listen(8088, () => {
  console.log('ws://localhost:8088')
})

image-20220529172415750

如果连接上了,那么http状态码会是101,因为要切换成ws协议

绑定事件

如果我们,在实例化后就开始发送信息,那就会导致信息发不出,因为还没连接上。这时候我们就得了解一下什么时候能发,进而得了解一下WebSocket的相关事件。

  • open:在连接成功建立时触发
  • error:在连接发生错误时触发(此时已经不能再发信息了)
  • close:在连接关闭时触发(此时已经不能再发信息了)
  • message:收到消息后触发(收到的消息在事件对象中的data里)
const socket = new WebSocket("ws://localhost:8088/mysocket");
socket.onopen = function () {
    console.log("连接建立");
    socket.send('hello');
    // socket.close()
};
socket.onerror = function () {
    console.log("连接发生错误");
};
socket.onclose = function () {
    console.log("连接关闭");
};

socket.onmessage = function (e) {
    console.log(e)
}

image-20220529173743731

image-20220529174046932

模拟两人对话

上面已经说了,收到消息会触发message事件,所以我们可以在message事件里根据收到的信息发送对应的信息。

客户端:

const socket = new WebSocket("ws://localhost:8088/mysocket");
socket.onopen = function () {
    console.log("连接建立");
    socket.send('hello');
    // socket.close()
};
socket.onerror = function () {
    console.log("连接发生错误");
};
socket.onclose = function () {
    console.log("连接关闭");
};

socket.onmessage = function ({ data }) {
    if (data.includes('你好')) {
        socket.send('再见,服务端ddd')
    } else if (data.includes('再见')) {
        // 调用close()方法关闭WebSocket连接
        socket.close()
    } else {
        socket.send('你好,我是客户端ccc')
    }
}

服务器:

const express = require('express')
const expressWs = require('express-ws')

const app = express()

// 将WebSocket服务加到app里,简单来说就是让app添加了ws方法
expressWs(app)

// 建立WebSocket服务
app.ws('/mysocket', function (ws) {
  // ws:建立WebSocket的实例
  ws.send('你连接成功啦')

  ws.onmessage = function ({ data }) {
    if (data.includes('你好')) {
      ws.send('你好,我是服务器ddd')
    } else if (data.includes('再见')) {
      ws.send('再见,客户端ccc')
    }
  }
})

app.listen(8088, () => {
  console.log('ws://localhost:8088')
})

image-20220529175742257

注意:如果收发部分处理,需要注意一下,如果没有处理好,可能会出现循环卡住的情况。

比如,服务器和客户端的message事件回调都是:

socket.onmessage = function ({ data }) {
    socket.send('hello')
}

image-20220529180303794

目录
相关文章
|
缓存 编译器
BOLT 二进制反馈优化技术
大型应用的代码往往达到数十甚至上百MB,这导致在程序执行时缓存机制无法充分利用,导致大量时间花费在CPU和内存链路上。通过对热点函数的布局进行优化,我们可以更好地利用CPU cache,从而获得较为可观的性能提升。针对这一问题,在编译技术上有PGO和Bolt两种解决办法,两者都是一种通过收集程序在运行时如跳转,调用关系,函数热度等执行信息,这些收集到的程序运行情况数据(profile data),可以更好地指导一些程序优化的策略,如是否对函数进行内联,以及对基本块和函数布局的排布来提高特定场景下的程序性能。
2477 2
BOLT 二进制反馈优化技术
|
7月前
|
算法 Go
🚀 力扣热题 78:子集(详细解析)
✅ 回溯法:经典通用模板,逻辑清晰易扩展。 ✅ 二进制法:简洁高效,适合面试快速写出解法。
232 30
|
Ubuntu Linux 测试技术
Linux系统之Ubuntu安装cockpit管理工具
【10月更文挑战第13天】Linux系统之Ubuntu安装cockpit管理工具
1024 4
Linux系统之Ubuntu安装cockpit管理工具
|
8月前
|
机器学习/深度学习 人工智能 算法
《为何朴素贝叶斯在小规模数据集中大放异彩?这篇文章来告诉你!》
在数据有限的情况下,朴素贝叶斯算法凭借简单高效的原理、对数据量需求少、强大的抗噪声能力和良好的可解释性,展现出独特优势。它基于贝叶斯定理和特征条件独立假设,简化了计算过程,避免了复杂模型所需的大量参数估计。即使在小规模数据集中,也能快速训练并提供可靠的分类结果,适用于文本分类、疾病诊断等场景。
163 23
Vue3拖拽插件(vuedraggable@next)
vuedraggable 是一款 Vue2 拖拽插件,可轻松实现列表项的拖拽排序与交互。通过简单配置,即可在不同区域间拖动元素并实现数据同步。支持多种事件监听和自定义样式。
1347 2
Vue3拖拽插件(vuedraggable@next)
|
JavaScript 前端开发 NoSQL
技术好文:Redash(开源轻量级智能)生产环境部署及实践(withoutdocker)
Redash(开源轻量级智能)生产环境部署及实践(withoutdocker)
830 0
|
存储 Java
Java编程中的对象序列化与反序列化
【9月更文挑战第12天】在Java的世界里,对象序列化与反序列化是数据持久化和网络传输的关键技术。本文将带你了解如何通过实现Serializable接口来标记一个类的对象可以被序列化,并探索ObjectOutputStream和ObjectInputStream类的使用,以实现对象的写入和读取。我们还将讨论序列化过程中可能遇到的问题及其解决方案,确保你能够高效、安全地处理对象序列化。
|
消息中间件 JavaScript 安全
使用 Dockerfile 构建生产环境镜像
1202 年了,如果你连 Docker 都不知道是什么,我建议买一本书看看——或者谷歌一下,博客已经写烂了。为什么有这篇文章,是因为我在真正做容器化改造的时候,发现公司生产环境存在大量的坑……
322 3
|
JSON 算法 安全
金润·核验通-银行卡二要素验证接口文档
银行卡二要素验证接口介绍:比对身份证号、银行卡号的一致性,核验持卡人信息真实性 更新时间:实时 接口类型:API接口 数据优势:直连官方数据,合法合规、权威、精确 数据安全:仅确认通过与不通过,保护个人信息安全 计费方式:核验计费,详情请咨询
金润·核验通-银行卡二要素验证接口文档
|
前端开发 JavaScript 安全
前端加密工具crypto-js
https://juejin.cn/post/7099013860597694500 前端加密工具crypto-js
911 0
前端加密工具crypto-js