iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一文教你如何优雅的使用WebSocket
  • 346
分享到

一文教你如何优雅的使用WebSocket

2024-04-02 19:04:59 346人浏览 安东尼
摘要

目录简介特性使用场景具体实现一、首先是服务端代码,这里我用的是nodejs。二、然后是客户端代码总结简介 websocket是基于tcp的一种双向通信协议。在此之前,一直是采用轮询的

简介

websocket是基于tcp的一种双向通信协议。在此之前,一直是采用轮询的方式进行双向通信,这种方式效率低下还非常浪费资源。为了解决这种问题,WEBSocket应运而生。

特性

  • 双向通信:websocket使得客户端跟服务端之间交换数据变得更加简单。允许服务器主动向客户端推送数据。浏览器只需要和服务器完成一次握手,就可以创建持久性的连接,并进行双向数据传输。
  • 实时性强: 服务器可以主动给客户端推送数据,相比Http请求需要先由客户端发起请求,浏览器才会响应,延迟明显更少、时间更短。
  • 连接保持:websocket连接创建成功后,只要连接不断开,通信会一直保持,而且还会省略部分状态信息(http请求可能每次请求都需要携带状态信息)

使用场景

  • 相对于http,websocket优势显而易见。所以在一些实时通信上,都需要用到websocket,比如多媒体聊天、玩家游戏、页面局部刷新、协同编辑等场景。

具体实现

  • 介绍完了什么是websocket,下面介绍下如何实现websocket

一、首先是服务端代码,这里我用的是nodejs

1、我们先新建一个websocket.js文件

// 创建websocket服务
const port = "8888"
const ws = require('nodejs-websocket');
const web_server = ws.createServer(function (conn) {
  conn.on('text', function (text) {
    console.log("发送的消息",text);
    conn.sendText(`发送成功了,发送的消息为:${text}`)
  });
  conn.on('close', function (code, reason) {
    console.log('关闭连接');
  });
  conn.on('error', function (code, reason) {
    console.log('异常关闭');
  });
}).listen(port);
exports.web_server = web_server

2、在app.js里面进行引入

const websocket = require("./websocket")

3、最后启动服务

node app

二、然后是客户端代码

① 在Vue中使用

1、我们先在utils下新建一个websocket.js文件

let webSocket = null;
let socketOpen = false;

// 发送消息
export const doSend = (message) => {
  if (socketOpen) {
    webSocket.send(message)
  }
}

// 初始化websocket
export const contactSocket = () => {
  if ("WebSocket" in window) {
    webSocket = new WebSocket("ws://192.168.1.100:8888/");
    webSocket.onopen = function () {
      console.log("连接成功!");
      socketOpen = true
    };
    webSocket.onmessage = function (evt) {
      var received_msg = evt.data;
      console.log("接受消息:" + received_msg);
    };
    webSocket.onclose = function () {
      console.log("连接关闭!");
    };
  }
}

2、页面引入文件

import { contactSocket, doSend }  from '@/utils/contactSocket'

3、具体使用实例

// 初始化websocket
contactSocket()
// 发送消息内容
setTimeout(() => {
  doSend("向服务端发送的消息")
}, 1000)

② 在uniapp中使用

1、我们先在utils文件夹下新建一个websocket.js文件

let socketOpen = false;
// 发送消息
function doSend(message) {
    if (socketOpen) {
        uni.sendSocketMessage({
            data: message
        });
    } 
}

// 初始化websocket
function contactSocket() {
    // 建立连接
    uni.connectSocket({
        url: 'ws://192.168.1.100:8888/'
    });
    // 连接错误
    uni.onSocketError(function(res) {
        console.log('WebSocket连接打开失败,请检查!');
    });
    // 打开了连接
    uni.onSocketOpen(function() {
        console.log('WebSocket连接已打开!');
        socketOpen = true;
    });
    // 关闭连接
    uni.onSocketClose(function(res) {
        console.log('WebSocket 已关闭!');
    });
    // 接受消息
    uni.onSocketMessage(function(res) {
        console.log('收到服务器内容:' + res.data);
    });
}

module.exports = {
    doSend,
    websocketInit
}

2、页面引入文件

import { doSend, contactSocket } from '@/utils/websocket.js'

3、具体使用实例

// 初始化websocket
contactSocket()
// 发送消息内容
setTimeout(()=>{
    doSend("向服务端发送的消息");
},1000)

总结

到此这篇关于如何优雅的使用WebSocket的文章就介绍到这了,更多相关优雅使用WebSocket内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 一文教你如何优雅的使用WebSocket

本文链接: https://www.lsjlt.com/news/147903.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 一文教你如何优雅的使用WebSocket
    目录简介特性使用场景具体实现一、首先是服务端代码,这里我用的是nodejs。二、然后是客户端代码总结简介 websocket是基于TCP的一种双向通信协议。在此之前,一直是采用轮询的...
    99+
    2024-04-02
  • 一文教你如何优雅处理Golang中的异常
    我们在使用Golang时,不可避免会遇到异常情况的处理,与Java、Python等语言不同的是,Go中并没有try...catch...这样的语句块,我们知道在Java中使用try....
    99+
    2024-04-02
  • 一文教你如何优雅的控制全局loading的显示
    在很多后台管理系统中,发送请求的时候,需要打开一个loading,收到响应后,需要关闭这个loading,对于这种通用的逻辑,我一般是在axios拦截器中做这种处理,因为不是每个请求...
    99+
    2024-04-02
  • 怎么优雅的使用WebSocket
    这篇“怎么优雅的使用WebSocket”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么优雅的使用WebSocket”文章吧...
    99+
    2023-06-30
  • 一文教你如何使用原生的Feign
    目录什么是Feign为什么使用Feign为什么要使用HTTP client为什么要使用Feign如何使用Feign项目环境说明引入依赖入门例子个性化配置更换为Spring的注解自定义...
    99+
    2024-04-02
  • 一文详解如何在uniapp中优雅地使用WebView
    目录从webview页面传值到uniapp中从uniapp中动态传值到webview页面调用webview中的方法总结这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 从...
    99+
    2023-01-03
    uniapp使用webview的方法 uniapp和webview实时交互 uniapp使用webview
  • 一文教你使用AspectJ
    本篇文章为大家展示了一文教你使用AspectJ,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。AOP虽然是方法论,但就好像OOP中的Java一样,一些先行者也开发了一套语言来支持AOP。目前用得比较火...
    99+
    2023-05-31
    aspectj ct
  • 一文教你使用MyBatis
    这期内容当中小编将会给大家带来有关一文教你使用MyBatis,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。什么是 MyBatisMyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架...
    99+
    2023-05-31
    mybatis
  • 一文教你如何在java中使用SpringMVC
    这期内容当中小编将会给大家带来有关一文教你如何在java中使用SpringMVC,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。一、简介在SpringMVC 中,控制器Controller 负责处理由Dis...
    99+
    2023-05-31
    java springmvc ava
  • 一文教你MySQL如何优化无索引的join
    目录前言遍历循环查询join 查询join buffer (Block Nested Loop)附:mysql  join查询没有走索引的原因总结前言 MySQL Join...
    99+
    2024-04-02
  • 一文教你如何在Java 中使用Calendar类
    今天就跟大家聊聊有关一文教你如何在Java 中使用Calendar类,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Java Calendar类的使用总结  在实际项目当中,我们经常会...
    99+
    2023-05-31
    java calendar ava
  • 一文教你JavaScript如何实现分支优化
    以上就是一文教你JavaScript如何实现分支优化的详细内容,更多请关注编程网其它相关文章!...
    99+
    2022-11-22
    javascript
  • 一文讲解如何优雅的调试jar包
    目录问题:步骤:关键点:IDEA源码必须与待调试jar包保持一致,切记!!!不然进不了debug模式!!!!后记:问题: 一般情况下,可以打成Jar包的项目,它的源码运行Applic...
    99+
    2024-04-02
  • 一文教你如何使用Python绘制瀑布图
    目录前期准备方法一:waterfall_ax方法二:waterfall_chart方法三:plotly什么是瀑布图?瀑布图用表达两个数值之间的变化过程,过程值为正的时候,向上加,过程...
    99+
    2023-05-16
    Python绘制瀑布图 Python 瀑布图
  • 一文教你如何使用Databinding写一个关注功能
    目录前言目标ModlePresenter前言 但是没有合理的架构,大家写出来的代码很可能是一大堆的复制粘贴。比如十几个页面,都有这个关注按钮。然后,你是不是也要写十几个地方呢 然后修...
    99+
    2024-04-02
  • 一文详解SpringBoot如何优雅地实现异步调用
    目录前言实现步骤自定义异步任务执行器和异常处理@Async如何工作的总结前言 SpringBoot想必大家都用过,但是大家平时使用发布的接口大都是同步的,那么你知道如何优雅的实现异步...
    99+
    2023-03-19
    SpringBoot实现异步调用 SpringBoot异步调用 SpringBoot调用
  • 一文教你如何使用Node进程管理工具-pm2
    目录pm2 是什么pm2 基本命令负载均衡配置文件日志总结pm2 是什么 pm2 是一个守护进程管理工具,它能帮你守护和管理你的应用程序。通常一般会在服务上线的时候使用 pm2 进行...
    99+
    2023-05-16
    Node进程管理工具pm2 进程管理工具pm2
  • 一篇文章教你如何在SpringCloud项目中使用OpenFeign
    目录OpenFeign的介绍OpenFeign是一种声明式 、模板化的HTTP客户端。OpenFeign与Feign的之间的关系OpenFegin中的两个常用注解在项目中使用Open...
    99+
    2024-04-02
  • 一文教你如何封装安全的go
    目录前言封装SafeGoSafeGoAndWait实现说明首先是接口设计方面其次是日志兼容hade最后是打印panic的trace记录总结前言 在业务代码开发过程中,我们会有很大概率...
    99+
    2024-04-02
  • 教你如何使用 JavaScript 读取文件
    目录使用 JavaScript 读取文件概述选择带有输入元素的文件处理输入元素的变化事件从输入元素的 files 属性中获取一个 File 对象使用 FileReader 读取 Fi...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作