当前位置：首页 > news >正文

websocket 使用示例

news 来源：原创 2024/5/20 5:37:14

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 {// 实例化socketsocket = 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{// 实例化socketthis.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>