webSocket-01

LH2HA3

已于 2022-07-04 09:54:54 修改

阅读量1k

点赞数

分类专栏： websocket 文章标签： websocket 大数据网络协议

于 2022-07-01 14:23:53 首次发布

本文链接：https://blog.csdn.net/LH2HA3/article/details/125545120

版权

websocket 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

MDN地址：详细请移步WebSocket - Web API 接口参考 | MDN

websocket是一种通信协议。

定义： 客户端和服务器双向通信，双方同时可以进行通信和数据交换

优点：可以实现真正的并发和性能优化，从而产生响应更快，更丰富的web应用程序

Web Socket URL：

前端如何使用websocket：

HTML5开始前端页面可以使用WebSocket('ws://localhost:3000')构造函数来生成websocket对象。其中ws://localhost:3000是webSocket服务器链接。

const ws = new WebSocket('ws://localhost:3000')

几个重要的Events：

open: 当客户端和服务器端建立了连接之后会调用该方法。

ws.addEventListener('open',(event)=>{
   con.innerHTML = '服务器已连接'
})

message:当服务器端给客户端发送了数据就会触发这个方法

ws.addEventListener('message',(e)=>{
   con.innerHTML = e.data
})

close:当服务器和客户端断开连接之后触发该事件

error：当连接由一些错误事件而关闭时调用。

两个重要的方法：

close(): ws.close() 用于关闭连接

send():ws.send(data)用于发送数据

下面是一个尝试的客户端（前端）websoclet代码，这里的代码会和后面服务端websocket代码形成整体：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>简单的websocket通信案例</title>
  <style>
    .content{
      margin-top:2px;
      width: 200px;
      height: 200px;
      border:1px solid #888;
    }
  </style>
</head>
<body>
    <div>
      <input type="text" placeholder="请输入" class="inp">
      <button class="btn">发送</button>
      <div class="content"></div>
    </div>
    <script>
        // 引入websocket
        const ws = new WebSocket('ws://localhost:3000')
        let input = document.querySelector('.inp')
        let btn = document.querySelector('.btn')
        let con = document.querySelector('.content')
        
        ws.addEventListener('open',(event)=>{
          con.innerHTML = '服务器已连接'
        })
        // 客户端点击发送数据到服务器
        btn.addEventListener('click',(e)=>{
          let value = input.value
          ws.send(value)
        })
        ws.addEventListener('message',(e)=>{
          con.innerHTML = e.data
        })
    </script>
</body>
</html>

后端的websocket代码：这里使用nodejs搭建websocket服务器。

首先需要安装nodejs-websocket

npm install nodejs-websocket

详细代码见下方：

const ws = require('nodejs-websocket')
const PORT = 3000
// 只要有用户登录就调用一次函数，并请生成一个conn对象
const server = ws.createServer(conn =>{
  // text 检测客户端传过来的数据
  conn.on('text',(data)=>{
    console.log(data)
    conn.send('服务器端来的:'+data.toUpperCase())
  })
  conn.on('error',(data)=>{
    console.log('错误')
  })
})
server.listen(PORT,()=>{
  console.log('服务器已启动')
})