目录简介特性使用场景具体实现一、首先是服务端代码,这里我用的是nodejs。二、然后是客户端代码总结简介 websocket是基于tcp的一种双向通信协议。在此之前,一直是采用轮询的
websocket是基于tcp的一种双向通信协议。在此之前,一直是采用轮询的方式进行双向通信,这种方式效率低下还非常浪费资源。为了解决这种问题,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_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文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0