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

目录
  • 简介
  • 特性
  • 使用场景
  • 具体实现
    • 一、首先是服务端代码,这里我用的是nodejs。
    • 二、然后是客户端代码
  • 总结

简介

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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • HTML5 WebSocket技术使用详解

    WebSocket WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术. 现很多网站为了实现即时通讯,所用的技术都是轮询(polling).轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客服端的浏览器,这种方式有一个很大的弊端,就是会占用很多的带宽. 最新的轮询效果是Comet – 用了AJAX.但这种技术虽然可达到全双工通信,但依然需要发出请求. 使用WebSocket,浏览器和服务器只需要要做一个握手的动

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

    目录 简介 特性 使用场景 具体实现 一.首先是服务端代码,这里我用的是nodejs. 二.然后是客户端代码 总结 简介 websocket是基于TCP的一种双向通信协议.在此之前,一直是采用轮询的方式进行双向通信,这种方式效率低下还非常浪费资源.为了解决这种问题,websocket应运而生. 特性 双向通信:websocket使得客户端跟服务端之间交换数据变得更加简单.允许服务器主动向客户端推送数据.浏览器只需要和服务器完成一次握手,就可以创建持久性的连接,并进行双向数据传输. 实时性强: 服

  • 一文教你如何优雅处理Golang中的异常

    我们在使用Golang时,不可避免会遇到异常情况的处理,与Java.Python等语言不同的是,Go中并没有try...catch...这样的语句块,我们知道在Java中使用try...catch...这种模式不仅能分离的错误与返回值和参数,也提供了结构化处理异常的可能,通过面向对象的思想,我们可以自定义错误类.子类,它们又可以包装其他错误,确保错误上下文不会丢失.但是在Go中,异常是作为函数返回值,返回给调用方的,这个时候我们如何才能更好的处理异常呢? 对于异常的处理,我们应该把握三个原则:

  • 一文教你如何优雅的控制全局loading的显示

    在很多后台管理系统中,发送请求的时候,需要打开一个loading,收到响应后,需要关闭这个loading,对于这种通用的逻辑,我一般是在axios拦截器中做这种处理,因为不是每个请求都需要全局显示loading,所以我在axios config中添加了一个标记showLoading, 用于标记发送请求之前是否需要显示loading,自然收到响应后,根据这个标记确定是否需要关闭loading,在axios拦截器中的代码如下: axios.interceptors.request.use( (con

  • WebSocket的通信过程与实现方法详解

    什么是 WebSocket ? WebSocket 是一种标准协议,用于在客户端和服务端之间进行双向数据传输.但它跟 HTTP 没什么关系,它是基于 TCP 的一种独立实现. 以前客户端想知道服务端的处理进度,要不停地使用 Ajax 进行轮询,让浏览器隔个几秒就向服务器发一次请求,这对服务器压力较大.另外一种轮询就是采用 long poll 的方式,这就跟打电话差不多,没收到消息就一直不挂电话,也就是说,客户端发起连接后,如果没消息,就一直不返回 Response 给客户端,连接阶段一直是阻塞的

  • 在vue中使用SockJS实现webSocket通信的过程

    最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程: socksjs •客户端和服务器端api尽可能简洁,尽量靠近websocket api •支持服务端扩展和负载均衡技术 •传输层应该全面支持跨域通信 •如果受到代理服务器的限制,传输层能优雅地从一种方式回退到另一种方式 •尽可能快地建立连接 •客户端只是纯

  • Django使用Channels实现WebSocket的方法

    WebSocket - 开启通往新世界的大门 WebSocket是什么? WebSocket是一种在单个TCP连接上进行全双工通讯的协议.WebSocket允许服务端主动向客户端推送数据.在WebSocket协议中,客户端浏览器和服务器只需要完成一次握手就可以创建持久性的连接,并在浏览器和服务器之间进行双向的数据传输. WebSocket有什么用? WebSocket区别于HTTP协议的一个最为显著的特点是,WebSocket协议可以由服务端主动发起消息,对于浏览器需要及时接收数据变化的场景非常

  • 详解nginx websocket配置

    一·什么是websocket WebSocket协议相比较于HTTP协议成功握手后可以多次进行通讯,直到连接被关闭.但是WebSocket中的握手和HTTP中的握手兼容,它使用HTTP中的Upgrade协议头将连接从HTTP升级到WebSocket.这使得WebSocket程序可以更容易的使用现已存在的基础设施. WebSocket工作在HTTP的80和443端口并使用前缀ws://或者wss://进行协议标注,在建立连接时使用HTTP/1.1的101状态码进行协议切换,当前标准不支持两个客户端

  • Websocket IM聊天教程 教你用GoEasy快速实现IM聊天

    经常有朋友问起GoEasy如何实现IM,今天就手把手的带大家从头到尾用GoEasy实现一个完整IM聊天,全套代码已经放在了github. 今日的前端技术发展可谓百花争鸣,为了确保本文能帮助到使用任何技术栈的前端工程师,Demo的源码实现上选择了最简单的HTML+JQuery的方式,所以,不论您是准备用Uniapp开发移动APP,还是准备写个小程序,不论你喜欢用React还是VUE,还是React-native或ionic, 或者您直接用原生 和Type ,都是可以轻松理解,全套代码已经放在git

  • vue使用webSocket更新实时天气的方法

    目录 前言 关于 webSocket 的操作及示例: webSocket 1.关于 webSocket 2.与 AJAX 轮的区别 3.webSocket 事件 4. 一个简单的示例 天气更新 图片素材 重连机制 前言 在 vue 中使用 webSocket 做一个简单的天气实时更新模块. 关于 webSocket 的操作及示例: 1.webSocket 连接 2.接收数据 3.重连机制 webSocket 1.关于 webSocket webSocket 是 HTML5 开始提供的一种在单个

  • 实现分布式WebSocket集群的方法

    目录 1.问题起因 场景描述 2.系统架构图 本文涉及的技术栈 3.技术可行性分析 WebSocketSession与HttpSession 4.解决方案的演变 4.1.Netty与SpringWebSocket 4.2.使用netty实现websocket 4.3.使用springwebsocket实现ws服务 4.3.1.第一步:添加依赖 4.3.2.第二步:添加配置类 4.3.3.第三步:实现消息监听类 5.从zuul技术转型到springcloudgateway 6.session广播

随机推荐