8.websocket学习(2)

前端代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>websocket示例</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
     <script src="https://unpkg.com/element-ui/lib/index.js"></script>


        <style type="text/css">
            .alert_demo{
                width: 150px;
                height: 150px;
                border:1px solid red;
                position: absolute;
                right: 0;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h3>消息显示</h3>
            <ul>
                <li v-for="(message, index) in messages" :key="index">
                    {{message}}
                </li>
            </ul>
            <hr>
            <h3>发送消息 </h3>
            <input type="text" v-model="sendMsg" />
            <button type="button" @click="send">发送</button>
             <el-alert v-if="isShow" :title="messages" type="success" description="接收到websocket数据,弹出此弹框" show-icon></el-alert>
             
             <div class="alert_demo">
                 {{messages}}
             </div>
        </div>
        <script type="text/javascript">
            var socket;
            var app = new Vue({
                el: '#app',
                data: {
                    messages: [],
                    sendMsg: '',
                    isShow:false
                },
                created: function() {
                    // var _this = this;
                    //创建WebSocket对象，指定要连接的服务器地址和端口，建立连接
                    socket = new WebSocket("ws://172.20.10.6:8080/websocket");
                    //打开连接
                    socket.onopen = function() {
                        console.log("Socket已打开");

                    };
                    //获得服务端推送的消息
                    socket.onmessage = (msg)=> {
                        console.log(msg.data);
                        this.messages.push(msg.data);
                        console.log(this.messages);
                        this.isShow = true
                        setTimeout(()=>{
                            this.isShow = false
                        },3000)
                        
                        this.$message({
                            type:'success',
                            message:msg.data
                            
                        })
                    };
                    //关闭连接
                    socket.onclose = function() {
                        console.log("Socket已关闭");
                    };
                    //发送错误
                    socket.onerror = function() {
                        alert("Socket发生了错误");
                    }
                },
                watch: {
                    // 如果 `messages` 发生改变，这个函数就会运行
                    messages: function(newMsg, oldMsg) {
                        this.messages = newMsg;
                    },
                },
                methods: {
                    send: function() {
                        socket.send(this.sendMsg);
                    }
                }
            })
        </script>
    </body>
</html>
8.websocket学习(2)

前端代码

推荐阅读更多精彩内容
