国内主流网站开发技术,怎么做网络推广优化,网站建设设计规划,用h5做的网站websocket 使用示例 前言html中使用vue3中使用1、安装websocket依赖2、代码 vue2中使用1、安装websocket依赖2、代码 前言
即时通讯webSocket 的使用
html中使用
以下是一个简单的 HTML 页面示例#xff0c;它连接到 WebSocket 服务器并包含一个文本框、一个发送按钮以及 … websocket 使用示例 前言html中使用vue3中使用1、安装websocket依赖2、代码 vue2中使用1、安装websocket依赖2、代码 前言
即时通讯webSocket 的使用
html中使用
以下是一个简单的 HTML 页面示例它连接到 WebSocket 服务器并包含一个文本框、一个发送按钮以及 WebSocket 连接、读取和关闭事件的监听。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleWebSocket 示例/titlescript// 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/headbodyh1WebSocket 示例/h1input typetext idmessageInput placeholder请输入要发送的信息 /button onclicksendMessage()Send/button/body
/html
vue3中使用
1、安装websocket依赖
npm install websocket2、代码
templatedivdivbutton clicksend发消息/button/div/div
/templatescript
import { defineComponent, ref onUnmounted, onMounted } from vueexport default defineComponent({name: coPy,setup () {const path ws://192.168.0.200:8005/qrCodePage/ID1/refreshTime5let 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 langless scoped
/style
vue2中使用
1、安装websocket依赖
npm install websocket2、代码
templatedivbutton clicksend发消息/button/div
/templatescript
export default {data () {return {path:ws://192.168.0.200:8005/qrCodePage/ID1/refreshTime5,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}
}
/scriptstyle/style
