websocket，vue链接

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

router.js

var express = require('express');
var expressWs = require('express-ws');
var router = express.Router();
expressWs(router);
router
  .ws('/user', function (ws, req){
    //   ws.on('message', function (msg) {
    //       // 业务代码
    //       console.log(123)
    //   })
    ws.send("连接成功")
    let interval
    // 连接成功后使用定时器定时向客户端发送数据，同时要注意定时器执行的时机，要在连接开启状态下才可以发送数据
    interval = setInterval(() => {
      if (ws.readyState === ws.OPEN) {
        ws.send(Math.random().toFixed(2))
      } else {
        clearInterval(interval)
      }
    }, 1000)
    // 监听客户端发来的数据，直接将信息原封不动返回回去
    ws.on("message", msg => {
      ws.send(msg)
    })
   })
  .get('/user', function(req, resp) {
  })
  .post('/user', function(req, resp) {
  })
module.exports = router;

　　index.js

var express = require('express');
var expressWs = require('express-ws');
var router = require('./router');
var app = express();
expressWs(app);
app.use('/ifc', router);
app.listen(3000);

　　node index.js 启动

html方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="websocket">
        <div class="receive">
            <p>服务端返回的消息</p>
            <div ></div>
        </div>
        <div class="send">
            <textarea type="text" ></textarea>
            <p>
                <button >点击发消息给服务端</button>
            </p>
        </div>
        <button >关闭连接</button>
    </div>
</body>
<script>
    const msgBox = document.getElementById("msg-need-send")
    const sendBtn = document.getElementById("send-btn")
    const exit = document.getElementById("exit")
    const receiveBox = document.getElementById("receive-box")
    // 创建一个webSocket对象
    const ws = new WebSocket("ws://localhost:3000/ifc/user")
    ws.onopen = e => {
        // 连接后监听
        console.log(`WebSocket 连接状态： ${ws.readyState}`)
    }
    ws.onmessage = data => {
        // 当服务端返回数据的时候，放到页面里
        receiveBox.innerHTML += `<p>${data.data}</p>`
        receiveBox.scrollTo({
            top: receiveBox.scrollHeight,
            behavior: "smooth"
        })
    }
    ws.onclose = data => {
        // 监听连接关闭
        console.log("WebSocket连接已关闭")
        console.log(data);
    }
    sendBtn.onclick = () => {
        // 点击发送按钮。将数据发送给服务端
        ws.send('消息')
    }
    exit.onclick = () => {
        // 客户端主动关闭连接
        ws.close()
    }
    var a = 0
    setInterval(() => {
        a++
        ws.send('消息' + a)
    }, 1000)
</script>
</html>

　　vue 方式

<template>
    <div>
        <button @click="send">发消息</button>
    </div>
</template>
<script>
export default {
    data () {
        return {
            path:"ws://localhost:3000/ifc/user",
            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('2222')
        },
        close: function () {
            console.log("socket已经关闭")
        }
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    }
}
</script>
<style>
</style>

以上是 websocket，vue链接 的全部内容， 来源链接： utcz.com/z/380063.html

回到顶部