websocket

前端 示例代码

<script>

  var input =document.querySelector('input')
  var  button =document.querySelector('button')
  var div =document.querySelector('div')

  // 1.创建websocket
  var socket =new WebSocket('ws://echo.websocket.org')
  
  // 2.open: 当和websocket服务连接成功的时候触发
  socket.addEventListener('open',function(){
    div.innerHTML='连接服务成功了'
  })

  // 3.主动给websocket服务器发送消息
  button.addEventListener('click',function(){
    var val =input.value
    socket.send(val) 
  })

  // 4.接收websocket服务的数据
  socket.addEventListener('message',function(e){
    console.log(e.data)
    div.innerHTML=e.data
  })


  socket.addEventListener('close',function(){
    div.innerHTML='服务断开连接'
  })

</script>

点击调试工具 中的 NetWork 中的 WS 可以看到发送和接收情况

绿色是发送给服务器的
红色是服务器返回来的

服务器端代码

1.安装 nodejs-websocket

yarn add nodejs-websocket

2.示例代码

const ws = require(‘nodejs-websocket’)

const PORT = 3000

// 创建一个server

// 每次只要有用户连接，函数就会被执行，会给当前连接的用户创建一个 connect 对象
const server = ws.createServer((connect) => {
  console.log('有用户连接上来了')
  // 每当接收到用户传递过来的数据，这个text事件会被触发
  connect.on('text', (data) => {
    console.log('接收到了用户的数据', data)
    // 给用户一个响应的数据
    // 对用户发送的数据，把小写转换成大写，并拼接一点内容
    connect.send(data.toUpperCase() + '!!!')
  })

  // 只要websocket连接断开，close 事件会触发
  connect.on('close', () => {
    console.log('连接断开了')
  })
 
  //   处理用户的错误信息
  connect.on('error', () => {
    console.log('用户连接异常')
  })
})

server.listen(PORT, () => {
  console.log('websocktet服务启动成功了,监听了端口' + PORT)
})

一个简单的聊天室

前端

<script>
  const type_enter = 0
  const type_leave = 1
  const type_message = 2
  var input = document.querySelector('input')
  var button = document.querySelector('button')
  var div = document.querySelector('div')

  // 1.创建websocket
  var socket = new WebSocket('ws://localhost:3000')

  // 2.open: 当和websocket服务连接成功的时候触发
  socket.addEventListener('open', function () {
    // div.innerHTML = '连接服务成功了'
  })

  // 3.主动给websocket服务器发送消息
  button.addEventListener('click', function () {
    var val = input.value
    socket.send(val)
    input.value = ''
  })

  // 4.接收websocket服务的数据
  socket.addEventListener('message', function (e) {
    // console.log(JSON.parse(e.data))
    let data = JSON.parse(e.data)
    var dv = document.createElement('div')
    dv.innerText = data.msg + '---------' + data.time
    if (data.type == type_enter) {
      dv.style.color = 'green'
    } else if (data.type == type_leave) {
      dv.style.color = 'red'
    } else {
      dv.style.color = '#333'
    }
    div.appendChild(dv)
  })

  socket.addEventListener('close', function () {
    // div.innerHTML = '服务断开连接'
  })
</script>

服务端

const ws = require('nodejs-websocket')

const PORT = 3000
// 用户数量
let count = 0
const type_enter = 0
const type_leave = 1
const type_message = 2

const server = ws.createServer((connect) => {
  count++
  connect.userName = `用户${count}`
  //   告诉所有用户，有人加入了聊天室
  broadcast({
    type: type_enter,
    msg: `${connect.userName}进入了聊天室！`,
    time: new Date().toLocaleDateString()
  })
  connect.on('text', (data) => {
    broadcast({
      type: type_message,
      msg:data,
      time: new Date().toLocaleDateString()
    })
  })

  connect.on('close', () => {
    count--
    //   告诉所有用户，有人离开了聊天室
    broadcast({
      type: type_leave,
      msg: `${connect.userName}离开了聊天室！`,
      time: new Date().toLocaleDateString()
    })
  })
  connect.on('error', () => {
    console.log('用户连接异常')
  })
})

//广播，给所有的用户发送消息
function broadcast(msg) {
  server.connections.forEach((item) => {
    item.send(JSON.stringify(msg))
  })
}

server.listen(PORT, () => {
  console.log('websocktet服务启动成功了,监听了端口' + PORT)
})