websocket简介和初体验

2024-02-03 19:39:58

今天学了下websocket，能做实时聊天系统那个，感觉还是挺不错的。

websocket简介

什么是websocket，它产生的契机是什么呢？websocket也是一种网络协议，可能有的人就奇怪，哎呀我们都有http协议了为什么还要牛马websocket协议，那肯定是http协议有不好的地方呗。比如http协议只能客户端向服务器端发起请求，然后服务器端才能给客户端发送数据，不能直接由服务器端主动的发送数据给客户端。那么有时候我们要实时的获取数据的话只有怎么办呢？只有客户端一直不停的给服务器端发送请求，这样一听就知道不合理，即浪费资源又浪费性能。所以websocket就应运而生。
首先，websocket也是基于http协议的，但是又比http协议高级点，首先它是跟http一样建立连接，之后当服务器端的数据发生改变时，就可以向客户端发送数据，这样就可以达到实时数据响应的目的了。同时在这个阶段客户端还是能正常的给服务器端发送请求。

websocket简单使用

我是使用的nodejs去搭的服务器，所以需要下载nodejs-websocket

npm install nodejs-websocket

接着开始操作：

const ws = require('nodejs-websocket')

let PORT = 3000

//创建连接对象
let server = ws.createServer(connect => {
  //当用户发送过来数据，会触发这个函数
  connect.on('text', date => {
    console.log(data);
  })

  //给客户端发送数据，注意send里面只能传入字符串类型
  connect.send('Hello websocket！')
  
  //当浏览器关闭时会触发
  connect.on('close', () => {
    console.log('websocket close！');
  })

  //当发生错误时会触发（包括关闭浏览器）
  connect.on('error', () => {

  })
})

server.listen(PORT, () => {
  console.log(`服务器开启，正在监听${PORT}`);
})

服务器搭建好了，接着我们来在html中简单操作一波：

<style>
  .father {
    border: 1px solid pink;
    width: 200px;
    height: 200px;
  }
</style>
<body>
  <input type="text">
  <button>发送请求</button>
  <div class="father"></div>
  <script>
    let input = document.querySelector('input')
    let button = document.querySelector('button')
    let div = document.querySelector('div')

    //创建连接
    let socket = new WebSocket('ws://localhost:3000')

    //监听连接成功
    socket.addEventListener('open', () => {      
      div.innerHTML = '连接成功'
    })

    button.addEventListener('click', (event) => {
      socket.send(input.value)
      input.value = ''
    })

    // 客户端接收服务端发送过来数据
    socket.addEventListener('message', (event) => {
      let dv = document.createElement('div')
      dv.innerHTML = event.data
      div.appendChild(dv)
    })
  </script>

嘿嘿，简简单单的运用了一下websocket就这样结束了。然后这也算是一个简单版的在线聊天平台，只需要我们将它稍微改一下。留在下一篇文章里面揭露。

码农公寓

websocket简介

websocket简单使用

相关文章