学习websocket - 技术栈

WebSocket是一种在Web浏览器和服务器之间实现双向通信 的协议。与HTTP协议不同，它允许服务器主动向客户端发送数据，而不需要客户端发出请求。这使得WebSocket非常适合实时应用程序，如在线聊天、实时游戏、股票市场更新等。

特点

双向通信：与HTTP不同，WebSocket允许在客户端和服务器之间进行双向通信，这意味着服务器可以推送数据给客户端，而不仅仅是响应客户端的请求。
低延迟：WebSocket连接始终处于打开状态，因此避免了HTTP请求/响应往返所引入的延迟。这使得它非常适合实时应用程序，可以更快地传输数据。
轻量级：WebSocket协议是一种轻量级的协议，与HTTP相比，它减少了在通信头中发送的数据量，从而减少了通信的开销。
支持跨域通信：WebSocket支持跨域通信，这使得可以在不同域之间建立连接，实现跨域通信。

常见的使用场景

实时聊天应用
实时游戏
实时数据更新

websocket的JS库

ws
Socket.io
nodejs-websocket
websocket-node

使用nodejs-websocket启动一个websocket

js 复制代码

import ws from 'nodejs-websocket'

// 创建一个服务server,每次用户链接，函数就会被执行，并给当前用户创建一个connect对象
var server = ws.createServer(connect => {
    // 每当接收到用户传递过来的数据，就会触发text事件，并传入数据
    connect.on("text", data => {
        // 给所有用户发送数据
        connect.server.connections.forEach(item => {
            console.log(data)
            item.send(data)
        })
    })
    connect.on("message", data => {
        console.log("收到客户端消息：" + data)
    })
    //监听websocket断开链接
    connect.on("close", () => {
        console.log("websocket连接断开....")
    })
    //监听websocket异常信息
    connect.on("error", () => {
        console.log("websocket连接异常....")
    })
})
server.listen(1111, () => {
    console.log("websocket running")
})

html 复制代码

  	<input type="text" placeholder="请输入内容">
    <button>提交</button>
    <script>

        const input = document.querySelector('input')
        const button = document.querySelector('button')
        const socket = new WebSocket('ws://localhost:1111')
     
        socket.addEventListener('open', () => {
           console.log('连接成功')
        })
        button.addEventListener('click', () => {
            const value = input.value
            socket.send(JSON.stringify(value))
            input.value = ''
        })
        socket.addEventListener('message', (e) => {
			// 接收到发过来的信息
            console.log(e.data)
           
        })
    </script>