您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

WebSocket基本使用方法

时间:2023-12-02 13:39:36  来源:微信公众号  作者:读心悦

WebSocket是一种双向、单套接字连接,使用WebSocket,那么请求就变成了打开WebSocket连接的单一请求,并且可以重用公客户端到服务器以及服务器到客户端的同一连接。

WebSock减少延迟,一旦建立起WebSocket连接,服务器可以在消息可用的时候发送。这是轮询和WebSocket的比较。

WebSocket基本使用方法

WebSocket让实时通信更加有效,可以节约带宽、CPU资源并减少延迟。

WebSocket连接通过在客户端和服务端之间第一次握手的时候将http协议升级到WebSocket协议来完成,这个过程在相同的底层TCP连接上进行。

创建WebSocket连接

首先调用WebSocket构造函数,创建一个WebSocket连接,构造函数返回的WebSocket对象实例。

建立客户端的WebSocket连接

使用WebSocket接口,通过指向一个表示所要连接端点的URL,实例化一个WebSocket对象。

WebSocket协议定义了两种URL:ws和wss。和HTTP、HTTPS类似,表示非加密和加密数据。wss表示使用传输层安全性的WebSocket连接。

WebSocket构造函数有一个必填的URL和可选参数protocols,URL是指向连接目标的URL;protocols是为了建立连接,服务器必须在它响应中包含一个或者一组协议名称,比如:

    <script>
        let ws = new WebSocket("ws://localhost:3000/",['com.kaazing.echo']);
        ws.onopen = () => {
            ws.send("hello")
        }
        ws.onmessage =(ev) => {
            console.log("ev", ev)
        }
        
    </script>

和所有的Web API事件一样,使用on+事件名称来处理属性监听这些事件。WebSocket对象调度4个不同的事件:

  1. open,当服务器响应了WebSocket连接请求,那么open事件触发并且建立一个连接,open事件对应的回调函数就是onopen。
  2. message,在接收到消息时候触发,对应事件的回调函数是onmessage,
  3. error,在响应意外故障的时候触发,对应的回调函数是onerror。错误还会导致WebSocket连接关闭。
  4. close,在WebSocket连接关闭的时候触发,对应的回调函数是onclose。一旦连接关闭,那么客户端或者服务器就不再能接收或者发送信息。

创建服务端的WebSocket

代码如下:

const express = require("express");
const http = require("http");
const Ws = require("ws").Server;
const App = express();

const server = http.createServer(app);

server.listen(3000);
app.use(express.static('www'));

let wsServer = new Ws({server});

wsServer.on("connection",function(socket){
    console.log("连接成功");
    socket.on("message",msg=>{
        console.log("客户端信息",msg)
        socket.send("客户端发送的信息:"+msg+","+new Date().getTime())
    })
})

index.html代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="mes"></p>

    <script>
        let pText = document.querySelector("p")
        let ws = new WebSocket("ws://localhost:3000/", ['com.kaazing.echo']);
        ws.onopen = (e) => {
            console.log("WebSocket open", e);
            setInterval(() => {
                ws.send(new Date().getTime())
            }, 2000)
        }
        ws.onmessage = ({ data }) => {
            pText.innerText = data;
        }

    </script>
</body>

</html>

然后执行命令:node ws.js,在浏览器打开上面创建的页面,效果如下:

WebSocket基本使用方法

 



Tags:WebSocket   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
详解基于SpringBoot的WebSocket应用开发
在现代Web应用中,实时交互和数据推送的需求日益增长。WebSocket协议作为一种全双工通信协议,允许服务端与客户端之间建立持久性的连接,实现实时、双向的数据传输,极大地提升了用...【详细内容】
2024-01-30  Search: WebSocket  点击:(8)  评论:(0)  加入收藏
浅谈WebSocket协议在Web领域的应用
Part 01、WebSocket是什么? WebSocket是一种在Web应用程序中提供双向通信的协议。它允许服务器主动向客户端推送数据,而不是像传统的HTTP请求-响应模式一样,客户端必须发送请...【详细内容】
2023-12-08  Search: WebSocket  点击:(199)  评论:(0)  加入收藏
WebSocket基本使用方法
WebSocket是一种双向、单套接字连接,使用WebSocket,那么请求就变成了打开WebSocket连接的单一请求,并且可以重用公客户端到服务器以及服务器到客户端的同一连接。WebSock减少延...【详细内容】
2023-12-02  Search: WebSocket  点击:(186)  评论:(0)  加入收藏
你不知道的Websocket协议,这次给你讲明白!
前言初次接触 websocket 的人,可能都会有这样的疑问:我们已经有了 http 协议,为什么还需要websocket协议?它带来了什么好处?原因是http每次请求只能由客户发起,而websocket最大特...【详细内容】
2023-11-29  Search: WebSocket  点击:(193)  评论:(0)  加入收藏
实时协作的秘诀:RabbitMQ与WebSockets的结合
实时协作是现代软件开发中非常重要的一个方面。为了实现实时协作,一种常见的做法是将消息队列与WebSocket技术相结合。其中,RabbitMQ是一个功能强大的消息队列系统,它能够有效...【详细内容】
2023-11-21  Search: WebSocket  点击:(176)  评论:(0)  加入收藏
WebSocket 魔法师:打造实时应用的无限可能
1、背景 在开发一些前端页面的时候,总是能接收到这样的需求:如何保持页面并实现自动更新数据呢?以往的常规做法,是前端使用定时轮询后端接口,获取响应后重新渲染前端页面,这种做法...【详细内容】
2023-11-09  Search: WebSocket  点击:(197)  评论:(0)  加入收藏
什么是WebSocket ,一文了解
WebSocket 允许我们创建“实时”应用程序,与传统 API 协议相比,该应用程序速度更快且开销更少。一、WebSocket 是如何工作的按照传统的定义,WebSocket是一种双工协议,主要用于客...【详细内容】
2023-10-03  Search: WebSocket  点击:(148)  评论:(0)  加入收藏
实时数据推送并非只有WebSocket一种选择
环境:SpringBoot2.7.16概述在Web应用中,有几种实时数据推送的选择方案,包括SSE(Server-Sent Events)、WebSocket、长轮询等。SSE是一种基于HTTP协议的服务器向客户端推送数据的技...【详细内容】
2023-09-27  Search: WebSocket  点击:(405)  评论:(0)  加入收藏
SpringBoot使用WebSocket实现即时消息
当以jar包形式运行时需要配置该bean,暴露我们配置的@ServerEndpoint;当我们以war独立tomcat运行时不能配置该bean。这里有个g-messages.js文件是我写的一个工具类,用来做连接及...【详细内容】
2023-08-14  Search: WebSocket  点击:(253)  评论:(0)  加入收藏
SpringBoot整合WebSocket详解
环境:Springboot3.0.5WebSocket介绍WebSocket协议RFC 6455提供了一种标准化的方式,通过一个TCP连接在客户端和服务器之间建立全双工、双向的通信通道。它是一个不同于HTTP的TC...【详细内容】
2023-08-09  Search: WebSocket  点击:(369)  评论:(0)  加入收藏
▌简易百科推荐
即将过时的 5 种软件开发技能!
作者 | Eran Yahav编译 | 言征出品 | 51CTO技术栈(微信号:blog51cto) 时至今日,AI编码工具已经进化到足够强大了吗?这未必好回答,但从2023 年 Stack Overflow 上的调查数据来看,44%...【详细内容】
2024-04-03    51CTO  Tags:软件开发   点击:(5)  评论:(0)  加入收藏
跳转链接代码怎么写?
在网页开发中,跳转链接是一项常见的功能。然而,对于非技术人员来说,编写跳转链接代码可能会显得有些困难。不用担心!我们可以借助外链平台来简化操作,即使没有编程经验,也能轻松实...【详细内容】
2024-03-27  蓝色天纪    Tags:跳转链接   点击:(12)  评论:(0)  加入收藏
中台亡了,问题到底出在哪里?
曾几何时,中台一度被当做“变革灵药”,嫁接在“前台作战单元”和“后台资源部门”之间,实现企业各业务线的“打通”和全域业务能力集成,提高开发和服务效率。但在中台如火如荼之...【详细内容】
2024-03-27  dbaplus社群    Tags:中台   点击:(8)  评论:(0)  加入收藏
员工写了个比删库更可怕的Bug!
想必大家都听说过删库跑路吧,我之前一直把它当一个段子来看。可万万没想到,就在昨天,我们公司的某位员工,竟然写了一个比删库更可怕的 Bug!给大家分享一下(不是公开处刑),希望朋友们...【详细内容】
2024-03-26  dbaplus社群    Tags:Bug   点击:(5)  评论:(0)  加入收藏
我们一起聊聊什么是正向代理和反向代理
从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替...【详细内容】
2024-03-26  萤火架构  微信公众号  Tags:正向代理   点击:(10)  评论:(0)  加入收藏
看一遍就理解:IO模型详解
前言大家好,我是程序员田螺。今天我们一起来学习IO模型。在本文开始前呢,先问问大家几个问题哈~什么是IO呢?什么是阻塞非阻塞IO?什么是同步异步IO?什么是IO多路复用?select/epoll...【详细内容】
2024-03-26  捡田螺的小男孩  微信公众号  Tags:IO模型   点击:(8)  评论:(0)  加入收藏
为什么都说 HashMap 是线程不安全的?
做Java开发的人,应该都用过 HashMap 这种集合。今天就和大家来聊聊,为什么 HashMap 是线程不安全的。1.HashMap 数据结构简单来说,HashMap 基于哈希表实现。它使用键的哈希码来...【详细内容】
2024-03-22  Java技术指北  微信公众号  Tags:HashMap   点击:(11)  评论:(0)  加入收藏
如何从头开始编写LoRA代码,这有一份教程
选自 lightning.ai作者:Sebastian Raschka机器之心编译编辑:陈萍作者表示:在各种有效的 LLM 微调方法中,LoRA 仍然是他的首选。LoRA(Low-Rank Adaptation)作为一种用于微调 LLM(大...【详细内容】
2024-03-21  机器之心Pro    Tags:LoRA   点击:(12)  评论:(0)  加入收藏
这样搭建日志中心,传统的ELK就扔了吧!
最近客户有个新需求,就是想查看网站的访问情况。由于网站没有做google的统计和百度的统计,所以访问情况,只能通过日志查看,通过脚本的形式给客户导出也不太实际,给客户写个简单的...【详细内容】
2024-03-20  dbaplus社群    Tags:日志   点击:(4)  评论:(0)  加入收藏
Kubernetes 究竟有没有 LTS?
从一个有趣的问题引出很多人都在关注的 Kubernetes LTS 的问题。有趣的问题2019 年,一个名为 apiserver LoopbackClient Server cert expired after 1 year[1] 的 issue 中提...【详细内容】
2024-03-15  云原生散修  微信公众号  Tags:Kubernetes   点击:(5)  评论:(0)  加入收藏
站内最新
站内热门
站内头条