一文教你如何优雅的使用WebSocket
时间：2022-11-07 09:37:55|栏目：JavaScript代码|点击： 次
简介
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)
总结
上一篇：IE下写xml文件的两种方式(fso/saveAs)
栏 目：JavaScript代码
本文标题：一文教你如何优雅的使用WebSocket
本文地址：http://www.codeinn.net/misctech/218380.html
