[网络协议] 小白学习websocket做的小demo

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 网络协议 -> 小白学习websocket做的小demo -> 正文阅读

[网络协议]小白学习websocket做的小demo

WebSocket是双向的，在客户端-服务器通信的场景中使用的全双工协议，与HTTP不同，它以ws://或wss://开头。它是一个有状态协议，这意味着客户端和服务器之间的连接将保持活动状态，直到被任何一方（客户端或服务器）终止。在通过客户端和服务器中的任何一方关闭连接之后，连接将从两端终止。
以上概述转自知乎：https://zhuanlan.zhihu.com/p/113286469
服务器端：

// websocket server

const WebSocket = require('ws')

const wss = new WebSocket.Server({port:8000})

wss.on('connection',function(ws){
    console.log('a new client is conntected');
    // on是监听客户端发来(send)的消息
    ws.on('message',function(msg){
        // 广播到其他的客户端
        wss.clients.forEach(function each(client){
            // 广播给非自己的其他客户端
            if(client !== ws && client.readyState === WebSocket.OPEN){
                client.send(msg.toString())
            }
        })
    })
})

客户端：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
        <input type="text" v-model="val" name="" id="">
        <button @click="add" type="button">发送</button>
    </div>
</body>

<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ],
            val:''
        },
        mounted(){
            var _this = this
            this.wsHandle = new WebSocket('ws://localhost:8000');
            this.wsHandle.onopen = this.onOpen
            this.wsHandle.onmessage = this.onmessage
        },
        methods:{
            add(){
                this.wsHandle.send(this.val)
                this.todos.push({
                    text: this.val
                })
                this.val = ''
            },
            onOpen:function(){
                console.log('client is connected');
            },
            onmessage: function(e){
                // 把数据推送到todos
                this.todos.push({
                    text: e.data
                })
            }
        }
    })
</script>

</html>