使用websocket书写即时通讯功能

最新推荐文章于 2024-06-03 09:20:03 发布

如果会御剑

最新推荐文章于 2024-06-03 09:20:03 发布

阅读量82

点赞数 1

文章标签： websocket javascript 前端

本文链接：https://blog.csdn.net/weixin_44694389/article/details/130182098

版权

注意：要使用websocket创建即时通讯，要先安装websocket。
npm install ws

创建websocket服务器（文件名称：webSocketServer.js）

const webSocketServer = require('ws').Server
const wss = new webSocketServer({port:3000})

wss.on('connection',function connection(ws){
  console.log('client connection');

  ws.on('message',function incoming(message){
    console.log(message.toString('utf-8'));
    wss.clients.forEach(function each(client){
      // if(client !== ws && client.readyState === WebSocket.OPEN){
      //   client.send(message)
      // }
      client.send(message)
    })
  })

  ws.on('close',function close(){
    console.log('client disconnected');
  })
})

2.在客户端上创建websocket链接（文件名称：websocket.js）

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

socket.addEventListener('open', function (event) {
  console.log('websocket connected');
})

socket.addEventListener('message', function (event) {
  // console.log('received', event.data);
  //将[object Blob]转换为对象的方法是使用JavaScript中的FileReader对象。
  // 可以使用FileReader对象的readAsText()方法来读取Blob对象中的数据并将其转换为字符串，
  // 然后使用JSON.parse()方法将字符串转换为JavaScript对象
  var reader = new FileReader();
  reader.readAsText(event.data);
  reader.onload = function () {
    const div = document.createElement('div')
    var bodyNode = document.querySelector('body');
    div.innerHTML = reader.result
    bodyNode.appendChild(div)
    //处理转换后的JavaScript对象
  }
})

socket.addEventListener('close', function (event) {
  console.log('webSocket disconnected');
})
export default socket

3. 创建发送消息事件（文件名称：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>即时通讯</title>
</head>

<body>
  <input id="inputId" type="text">
  <button id="submit">发送</button>

  <script type="module">
    import socket from './webSocket.js'

    const submit = document.getElementById('submit')
    submit.addEventListener('click', function (e) {
      const text = document.getElementById('inputId').value
      socket.send(text)
    })
  </script>
</body>

</html>

4.运行websocket服务器（在终端运行）

node webSocketServer.js

5. 在浏览器运行index.html文件，输入内容点击发送按钮即可实现即时通讯功能。

在不同浏览器上打开多个窗口，都可以实现接收另一端发送的消息

如果会御剑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用websocket书写即时通讯功能

5. 在浏览器运行index.html文件，输入内容点击发送按钮即可实现即时通讯功能。2.在客户端上创建websocket链接（文件名称：websocket.js）注意：要使用websocket创建即时通讯，要先安装websocket。3. 创建发送消息事件（文件名称：index.html）在不同浏览器上打开多个窗口，都可以实现接收另一端发送的消息。4.运行websocket服务器（在终端运行）
复制链接

扫一扫