WebSocket 的介绍及基本使用

这篇具有很好参考价值的文章主要介绍了WebSocket 的介绍及基本使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

websocket

什么是 websocket ? https://websocket.org/

  • 是一种网络通信协议,和 HTTP 协议 一样。

为什么需要websocket ?

  • 因为 HTTP 协议有一个缺陷:通信只能由客户端发起。

了解 websocket api含义

基于原生的 websocket 完成服务端和客户端的通讯

//  new WebSocket是一个内置的js对象,服务端的通讯地址放在WebSocket构造函数里
// wss是加密的WebSocket协议,类似https
// 建立连接
var ws = new WebSocket("wss://javascript.info/article/websocket/demo/hello");

// 监听连接成功
ws.onopen = function(evt) { 
  console.log("连接成功 ...");
  // 向服务端发消息
  ws.send("Hello WebSockets!");
};

// 接收服务端回的消息
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  // 客户端主动关闭通讯
  ws.close();
};

// 服务端主动关闭通讯
ws.onclose = function(evt) {
  console.log("连接关闭");
};      

 socket.io

在做客户端和服务端 通讯业务时,可以采用使用一种前后端即时通讯解决方案 socket.io

socket.io 是什么?

  • socket.io 是一个基于 WebSocket 的 CS(客户端-服务端)的实时通信库
  • 使用它可以在后端提供一个即时通讯服务
  • 它也提供一个 js 库,在前端可以去链接后端的 socket.io 创建的服务
  • 总结:它是一套基于 websocket 前后端即时通讯解决方案

socket.io 如何使用? 

可以体验下这个 官方Demo(体验官方demo 建立连接时会产生cors跨域问题,需要在服务端的demo代码中开启cors,在index.js文件中加上cors:true)

const io = require('socket.io')(http,{cors:true})

socket.io-client 

 如何使用客户端js库?

 下载 socket.io-client

pnpm add socket.io-client

 如何建立连接?通过io函数传入服务器的地址

import io from 'socket.io-client'
// 参数1:不传默认是当前服务域名,开发中传入服务器地址
// 参数2:配置参数,根据需要再来介绍
const socket = io('http://localhost:3000')

如何确定连接成功?

socket.on('connect', () => {
  // 建立连接成功
  console.log('连接成功)
  // 发送消息
  socket.emit('chat message', '消息内容')
})

如何发送消息?

// chat message 发送消息事件,由后台约定,可变
socket.emit('chat message', '消息内容')

如何接收消息?

// chat message 接收消息事件,由后台约定,可变
socket.on('chat message', (msg) => {
  // msg 是服务器发送的消息,服务器会把你发的消息返回给你
  console.log(msg)
  // 关闭连接
  socket.close()
})

如何关闭连接?

// 离开组件需要使用
socket.close()

关闭连接后会触发一个事件 disconnect

// 连接关闭后触发
socket.on('disconnect', (msg) => {
  console.log('连接关闭')
})

 连接失败后会触发error事件

  socket.on('error', () => {
    console.log('连接失败')
  })

 在前端项目中实现使用 socket.io-client 实现即时通讯 贴代码

下载 引入

// 导入socket 类型
import io, { Socket } from 'socket.io-client'
// 声明一个全局变量socket 方便多处引用
let socket: Socket

onMounted(() => {
// 初始化io时传入authToken做身份认证---没有登录不能聊天,
// 传入当前问诊的订单id---才能把用户和用户的医生放在同一个房间里
  socket = io(baseURL, {
    auth: {
      token: `Bearer ${store.user?.token}`
    },
    query: {
      id: store.user?.id
    }
  }

  socket.on('connect', () => {
    console.log('连接成功')
  })

  socket.on('disconnect', () => {
    console.log('连接关闭')
  })

  socket.on('error', () => {
    console.log('连接失败')
  })
})

// 组件销毁时断开连接
onUnmounted(() => {
  socket.close()
})

WebSocket 的介绍及基本使用

 在这里,接收消息获取聊天的一些事件 也就是通讯规则,通讯规则需要参考约定的接口规则

chatMsgList 接收聊天记录

sendChatMsg 发送消息

receiveChatMsg 接收消息

updateMsgStatus 消息已读

getChatMsgList 获取聊天记录

statusChange 接收订单状态改变文章来源地址https://www.toymoban.com/news/detail-508780.html

到了这里,关于WebSocket 的介绍及基本使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WebSocket的介绍及使用

    目录 一、Websocket是什么? 1.1 产生背景及原因: 1.2 简述 1.3 HTTP协议和WebSocket协议对比: 1.4 WebSocket应用场景 1.5 疑问 二、入门案例 2.1 前端页面 2.2 导入maven坐标 2.3 定义WebSocket服务端组件,用于和客户端通信 2.4 让组件生效,创建配置类WebSocketConfiguration,注册WebSocket的服务端

    2024年02月21日
    浏览(25)
  • WebSocket之socket.io的基本使用

     Socket.IO 是一个WebSocket库,可以在客户端和服务器之间实现低延迟、双向和基于事件的通信。它建立在 WebSocket 协议之上,并提供额外的保证,例如回退到 HTTP 长轮询或自动重新连接。 基本使用 安装socket.io yarn add socket.io  新建js文件与html文件内容如下 这个时候启动node后,

    2024年02月08日
    浏览(33)
  • 在 SpringBoot中的WebSocket使用介绍

    在 Spring Boot 中,WebSocket 是一种非常有用的通信协议。WebSocket 可以使客户端和服务器之间实现双向通信,而不是传统的单向 HTTP 请求和响应。本文将介绍在 Spring Boot 中如何使用 WebSocket。 添加依赖 在 pom.xml 文件中添加以下依赖: 创建 WebSocket 配置类 创建一个 WebSocketConfig 类,

    2024年01月19日
    浏览(35)
  • websocket--技术文档--spring后台+vue基本使用

            给大家分享一个可以用来进行测试websocket的网页,个人觉得还是挺好用的. WebSocket在线测试工具 还有一个小家伙 ApiPost也可以进行使用websocket的测试。 在Spring Boot中使用WebSocket建立服务端,可以按照以下步骤进行: 确保的Spring Boot项目已经创建并配置好。 在项目的

    2024年02月09日
    浏览(50)
  • ApiPost7使用介绍 | HTTP && Websocket

    创建项目(团队下面可以创建多个项目节点,每个项目可以创建多个接口): 参数描述库(填写参数时自动填充描述): 新建环境(前置URL、环境变量很有用): 设计接口(后台设计一个接口,比如:名称、接口后段内容、说明、请求参数、响应值): 请求参数包含Heade

    2024年02月09日
    浏览(46)
  • Python-Websocket的介绍及使用方法

    👏👏👏 哈喽!大家好,我是【太阳打伞】,一位热爱分享各种技术的博主!😍😍😍 ⭐【太阳打伞】的创作宗旨:每一条命令都亲自执行过,每一行代码都实际运行过,每一种方法都真实实践过,每一篇文章都良心制作过。✊✊✊ ⭐【太阳打伞】的博客中所有涉及命令、

    2023年04月15日
    浏览(37)
  • ChatGPT对话为什么不用WebSocket而使用EventSource?

    🎉ChatGPT对话为什么不用WebSocket而使用EventSource? ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:AIGC人工智能 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果文中出现错

    2024年02月04日
    浏览(65)
  • nginx配置websocket或https的转发教程

    1、把普通的IP访问改为自己的域名,例如我们希望的域名是mywebsocket.test.com,那么前端页面配置的地址如下 2、页面的DEMO如下,比较简单 3、nginx的配置如下 4、nginx命令,每次nginx.conf修改后,需要重新reload

    2024年02月11日
    浏览(48)
  • WebSocket 是什么?WebSocket 前后端交互

    WebSocket是一种在Web浏览器和服务器之间建立实时双向通信的技术。它不同于HTTP协议,因为HTTP是单向协议,只能客户端向服务器发送请求,服务器才能响应请求。而 WebSocket可以实现双向通信 ,客户端和服务器可以随时互相发送消息,无需等待请求和响应。 WebSocket 协议是 HT

    2024年02月08日
    浏览(45)
  • 解决:VUE nginx 部署 SSL https访问 WebSocket 问题

    报错1.  Failed to construct \\\'WebSocket\\\': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS. 报错2. 说明: http 是 ws:`ws://192.168.110.33:8080/websocket/${this.$store.state.user.name}` https 是 wss: `wss://alarm.shijiguorui.com:443/websocket/${this.$store.state.user.name}` 1. 服务nginx代理使用http 访问 W

    2024年01月23日
    浏览(89)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包