这篇“怎么优雅的使用WebSocket”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么优雅的使用WebSocket”文章吧。
websocket是基于TCP的一种双向通信协议。在此之前，一直是采用轮询的方式进行双向通信，这种方式效率低下还非常浪费资源。为了解决这种问题，websocket应运而生。
双向通信：websocket使得客户端跟服务端之间交换数据变得更加简单。允许服务器主动向客户端推送数据。浏览器只需要和服务器完成一次握手，就可以创建持久性的连接，并进行双向数据传输。
实时性强: 服务器可以主动给客户端推送数据，相比http请求需要先由客户端发起请求，浏览器才会响应，延迟明显更少、时间更短。
连接保持：websocket连接创建成功后，只要连接不断开，通信会一直保持，而且还会省略部分状态信息（http请求可能每次请求都需要携带状态信息）
相对于http，websocket优势显而易见。所以在一些实时通信上，都需要用到websocket，比如多媒体聊天、玩家游戏、页面局部刷新、协同编辑等场景。
介绍完了什么是websocket，下面介绍下如何实现websocket。
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_server2、在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”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
