怎么优雅的使用WebSocket

这篇“怎么优雅的使用WebSocket”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么优雅的使用WebSocket”文章吧。

简介

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

特性

• 双向通信：websocket使得客户端跟服务端之间交换数据变得更加简单。允许服务器主动向客户端推送数据。浏览器只需要和服务器完成一次握手，就可以创建持久性的连接，并进行双向数据传输。

• 实时性强: 服务器可以主动给客户端推送数据，相比http请求需要先由客户端发起请求，浏览器才会响应，延迟明显更少、时间更短。

• 连接保持：websocket连接创建成功后，只要连接不断开，通信会一直保持，而且还会省略部分状态信息（http请求可能每次请求都需要携带状态信息）

使用场景

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

具体实现

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

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

我们先新建一个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

在app.js里面进行引入

const websocket = require("./websocket")

最后启动服务

node app

二、然后是客户端代码

① 在vue中使用

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

let webSocket = null;let socketOpen = false;// 发送消息export const doSend = (message) => {  if (socketOpen) {    webSocket.send(message)  }}// 初始化websocketexport 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("连接关闭！");    };  }}

页面引入文件

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

具体使用实例

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

② 在uniapp中使用

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

let socketOpen = false;// 发送消息function doSend(message) {    if (socketOpen) {        uni.sendSocketMessage({            data: message        });    } }// 初始化websocketfunction 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}

页面引入文件

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

具体使用实例

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

以上就是关于“怎么优雅的使用WebSocket”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。