Bootstrap

学习websocket

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

特点

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

常见的使用场景

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

websocket的JS库

  • ws
  • Socket.io
  • nodejs-websocket
  • websocket-node
使用nodejs-websocket启动一个websocket
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")
})
  	<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>
;