websocket学习笔记

最新推荐文章于 2022-07-04 16:51:09 发布

Akimoto Hiroshi

最新推荐文章于 2022-07-04 16:51:09 发布

阅读量291

点赞数

分类专栏：计算机网络 node 文章标签： websocket socket.io

本文链接：https://blog.csdn.net/dyw3390199/article/details/114176992

版权

node 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

计算机网络

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

先看一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>echo test</h1>
  <input id="sendTxt" type="text"></input>
  <button id="send">发送</button>
  <div id="recv"></div>
  <script>
    var ws = new WebSocket('ws://echo.websocket.org/')
    var recv = document.querySelector('#recv')
    ws.onopen = () => {
      console.log('websocket open')
      recv.innerHTML = 'connected!'
    }
    ws.onclose = () => {
      console.log('websocket close')
    }
    ws.onmessage = (e) => {
      console.log(e.data)
      recv.innerHTML = e.data
    }

    document.querySelector('#send').onclick = () => {
      var txt = document.querySelector('#sendTxt').value
      ws.send(txt)
    }
  </script>
</body>
</html>

这个例子很简单，我们打开network里面看看
在这里插入图片描述

nodejs-websocket

在这里插入图片描述
新建demo2文件夹，执行npm i nodejs-websocket安装nodejs-websocket
新建wsServer.js文件：

var ws = require("nodejs-websocket")

const PORT = 8001

var server = ws.createServer(function (conn) {
  console.log("New connection")
  conn.on("text", function (str) {
    console.log("Received " + str)
    conn.sendText(str.toUpperCase() + "!!!")
  })
  conn.on("close", function (code, reason) {
    console.log("Connection closed")
  })
  conn.on("error", function (err) {
    console.log('err:', err)
  })
}).listen(PORT, () => {
  console.log(`server listening at port ${PORT}...`)
})

启动服务端代码，然后修改index.html里面的地址：
在这里插入图片描述

简单聊天室

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Chat Room</h1>
  <input id="sendTxt" type="text"></input>
  <button id="send">发送</button>
  <div id="recv"></div>
  <script>
    var ws = new WebSocket('ws://localhost:8001/')
    var recv = document.querySelector('#recv')

    function showMessage(str) {
      var div = document.createElement('div')
      div.innerHTML = str
      document.body.appendChild(div)
    }

    ws.onopen = () => {
      console.log('websocket open')
      document.querySelector('#send').onclick = () => {
        var txt = document.querySelector('#sendTxt').value
        if (txt) {
          ws.send(txt)
        }
      }
    }
    ws.onclose = () => {
      console.log('websocket close')
    }
    ws.onmessage = (e) => {
      showMessage(e.data)
    }
  </script>
</body>
</html>

// wsServer.js
var ws = require("nodejs-websocket")

const PORT = 8001
// 不止一个客户端
var clientCount = 0

function broadcast(str) {
  server.connections.forEach(function(connection){
    connection.sendText(str)
  })
}

var server = ws.createServer(function (conn) {
  console.log("New connection")
  // 连接成功,客户端数量+1
  clientCount++
  // 给每个客户端起名字
  conn.nickname = `user ${clientCount}`
  // 广播告知
  broadcast(`${conn.nickname} 来了`)
  conn.on("text", function (str) {
    console.log("Received " + str)
    broadcast(`${conn.nickname}发出新消息: ${str}`)
  })
  conn.on("close", function (code, reason) {
    console.log("Connection closed")
    broadcast(`${conn.nickname} 离开了`)
  })
  conn.on("error", function (err) {
    console.log('err:', err)
  })
}).listen(PORT, () => {
  console.log(`server listening at port ${PORT}...`)
})

启动wsServer.js,打开多个index.html页面，互相之间可以收发消息了：
在这里插入图片描述

优化

我们把真正收发的消息和系统提示"xxx来了xxx走了"分开,并且对不同类型的消息设置不同的颜色：

// wsServer.js 服务端
var ws = require("nodejs-websocket")

const PORT = 8001
// 不止一个客户端
var clientCount = 0

function broadcast(str) {
  server.connections.forEach(function(connection){
    connection.sendText(str)
  })
}

var server = ws.createServer(function (conn) {
  console.log("New connection")
  // 连接成功,客户端数量+1
  clientCount++
  // 给每个客户端起名字
  conn.nickname = `user ${clientCount}`
  // 广播告知

  // 加入type类型
  var msgObj = {
    type: 'enter',
    data: `${conn.nickname} 来了`
  }
  broadcast(JSON.stringify(msgObj))

  conn.on("text", function (str) {
    var msgObj = {
      type: 'message',
      data: `${conn.nickname} ${str}`
    }
    broadcast(JSON.stringify(msgObj))
  })
  conn.on("close", function (code, reason) {
    console.log("Connection closed")
    var msgObj = {
      type: 'leave',
      data: `${conn.nickname} 离开了`
    }
    broadcast(JSON.stringify(msgObj))
  })
  conn.on("error", function (err) {
    console.log('err:', err)
  })
}).listen(PORT, () => {
  console.log(`server listening at port ${PORT}...`)
})

// index.html 客户端
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Chat Room</h1>
  <input id="sendTxt" type="text"></input>
  <button id="send">发送</button>
  <div id="recv"></div>
  <script>
    var ws = new WebSocket('ws://localhost:8001/')
    var recv = document.querySelector('#recv')

    function showMessage(str, type) {
      var div = document.createElement('div')
      div.innerHTML = str
      // 根据类型type的不同设置不同的style
      if (type === 'enter') {
        div.style.color = 'blue'
      } else if (type === 'leave') {
        div.style.color = 'red'
      }
      document.body.appendChild(div)
    }

    ws.onopen = () => {
      console.log('websocket open')
      document.querySelector('#send').onclick = () => {
        var txt = document.querySelector('#sendTxt').value
        if (txt) {
          ws.send(txt)
        }
      }
    }
    ws.onclose = () => {
      console.log('websocket close')
    }
    ws.onmessage = (e) => {
      var msgObj = JSON.parse(e.data)
      showMessage(msgObj.data, msgObj.type)
    }
  </script>
</body>
</html>

效果如下：
在这里插入图片描述

Akimoto Hiroshi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
websocket学习笔记

先看一个例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫