socket.io 小demo

最新推荐文章于 2024-04-06 18:56:19 发布

公有云私有云

最新推荐文章于 2024-04-06 18:56:19 发布

阅读量471

点赞数

本文链接：https://blog.csdn.net/qq_39579242/article/details/105678854

版权

websocket，小demo；记录；便于以后查看：服务端nodejs

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <script src="http://localhost:3000/socket.io/socket.io.js" charset="utf-8"></script>
</head>

<body>
  <p style="color: red;display: none" id="p">服务器已经断开连。。。。</p>
  <div id="div1" style="width: 400px;height: 500px;border: 1px solid black;"></div><br>
  <textarea name="text" id="tex" cols="20" rows="2"></textarea>
  <input id="btn" type="button" value="发送">
</body>
<script>
  window.onload = function () {
    let sock = io.connect('ws://localhost:3000/');
    let text = document.getElementById('tex');
    let btn = document.getElementById('btn');
    let div1 = document.getElementById('div1');
    let pp = document.getElementById('p');

    sock.on('connect', () => { // 已经连接服务器时触发
      pp.style.display = 'none'; // 关闭显示
      btn.disabled = ''; // 按钮可用
      btn.style.backgroundColor = '';
    })

    sock.on('disconnect', () => { // 断开服务器连接时触发
      pp.style.display = 'block'; // 显示提示
      btn.disabled = 'true';  // 禁用按钮
      btn.style.backgroundColor = '#ccc';
    })

    btn.onclick = function () {
      sock.emit('msg', text.value); // 发送
      // 自己发送的，给个标记
      let p1 = document.createElement('p');
      p1.innerHTML = text.value;
      p1.style.color = 'green';
      div1.appendChild(p1);
      // 发送结束清空内容
      text.value = '';
    }
    sock.on('msg', str => { // 接收
      let p1 = document.createElement('p');
      p1.innerHTML = str;
      p1.style.color = 'red';
      div1.appendChild(p1);
    })
  }
</script>

</html>

const http = require('http');
const io = require('socket.io');

let httpServer = http.createServer((req,res)=>{

});
httpServer.listen(3000);

let wsServer = io.listen(httpServer);
let lists = [];
wsServer.on('connection',sock=>{
  lists.push(sock);

  // 断开连接
  sock.on('disconnect',()=>{ // 把断开连接的剔除
    let n = lists.indexOf(sock);
    if(n !=-1) {
      lists.splice(n,1);
    }
  });

  sock.on('msg',str => {
    lists.forEach(item => {
      if(item != sock) {
        item.emit('msg',str);
      }
    })
  });
});

公有云私有云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
socket.io 小demo

websocket，小demo；记录；便于以后查看：服务端nodejs<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <script src="http://localhost:3000/socket.io/socket.io.js" charset...
复制链接

扫一扫