websocket 使用示例
- 前言
- html中使用
- vue3中使用
- 1、安装websocket依赖
- 2、代码
- vue2中使用
- 1、安装websocket依赖
- 2、代码
前言
即时通讯webSocket 的使用
html中使用
以下是一个简单的 HTML 页面示例，它连接到 WebSocket 服务器并包含一个文本框、一个发送按钮以及 WebSocket 连接、读取和关闭事件的监听。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebSocket 示例</title>
<script>
// 1. 创建一个 WebSocket 对象
let socket = new WebSocket("ws://192.168.22.199/WebSocket/");
// 2. 监听 WebSocket 连接事件
socket.addEventListener("open", function (event) {
console.log("连接事件成功:", event);
});
// 3. 监听 WebSocket 收到消息事件
socket.addEventListener("message", function (event) {
console.log("接收到的消息事件:", event.data);
});
// 4. 监听 WebSocket 关闭事件
socket.addEventListener("close", function (event) {
console.log("关闭WebSocket:", event);
});
// 5. 监听 WebSocket 出错事件
socket.addEventListener("error", function (event) {
console.error("WebSocket error报错:", event);
});
// 6、webSocket发送消息
function sendMessage() {
let message = document.getElementById("messageInput").value;
if (message) {
socket.send(message);
}
}
</script>
</head>
<body>
<h1>WebSocket 示例</h1>
<input type="text" id="messageInput" placeholder="请输入要发送的信息" />
<button onclick="sendMessage()">Send</button>
</body>
</html>
vue3中使用
1、安装websocket依赖
npm install websocket
2、代码
<template>
<div>
<div>
<button @click="send">发消息</button>
</div>
</div>
</template>
<script>
import { defineComponent, ref， onUnmounted, onMounted } from 'vue'
export default defineComponent({
name: 'coPy',
setup () {
const path = 'ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5'
let socket = ''
const open = () => {
console.log('socket连接成功')
}
const error = () => {
console.log('连接错误')
}
const getMessage = (msg) => {
console.log(msg.data)
}
const send = () => {
socket.send('输入成功')
console.log('消息发送成功')
}
const close = () => {
console.log('socket已经关闭')
}
const initWs = () => {
if (typeof (WebSocket) === 'undefined') {
alert('您的浏览器不支持socket')
} else {
// 实例化socket
socket = new WebSocket(path)
// 监听socket连接
socket.onopen = open
// 监听socket错误信息
socket.onerror = error
// 监听socket消息
socket.onmessage = getMessage
}
}
onMounted(() => {
initWs()
})
onUnmounted(() => {
close()
})
return {
}
}
})
</script>
<style lang="less" scoped>
</style>
vue2中使用
1、安装websocket依赖
npm install websocket
2、代码
<template>
<div>
<button @click="send">发消息</button>
</div>
</template>
<script>
export default {
data () {
return {
path:"ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5",
socket:""
}
},
mounted () {
// 初始化
this.init()
},
methods: {
init: function () {
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}else{
// 实例化socket
this.socket = new WebSocket(this.path)
// 监听socket连接
this.socket.onopen = this.open
// 监听socket错误信息
this.socket.onerror = this.error
// 监听socket消息
this.socket.onmessage = this.getMessage
}
},
open: function () {
console.log("socket连接成功")
},
error: function () {
console.log("连接错误")
},
getMessage: function (msg) {
console.log(msg.data)
},
send: function () {
this.socket.send(params)
},
close: function () {
console.log("socket已经关闭")
}
},
destroyed () {
// 销毁监听
this.socket.onclose = this.close
}
}
</script>
<style>
</style>
