使用socket.io的demo

在main中监听3000端口并且启动SOCKET

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);

server.listen(3000,()=>{
    console.log('服务器启动成功');
});

//处理静态资源,把public目录设置为静态资源
app.use(require('express').static('public'));

app.get('/', (req, res) => {
    //重定向到首页
    res.redirect('/index.html');
});

io.on('connection', (socket) => {
   console.log('新用户连接',socket.handshake.query.type,socket.handshake.query.name);
//    const type = socket.handshake.query.type
    socket.on('type', function(msg){
       console.log('获取到消息', 'type',socket.id, '转发给客户')
       socket.emit('type',msg)
    });
    // 特殊事件 disconnect
    socket.on('disconnect', ()=>{
        console.log('disconnect')
    })
    socket.on(socket.handshake.query.type, function(msg){
        io.emit(socket.handshake.query.type, msg);
      });
});

在pubilc文件夹下的index.html中写入浏览器端的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://alicdn.antdv.com/v1/16.82f93dbf.css">
    <link rel="stylesheet" href="https://alicdn.antdv.com/v1/index.e241c3b9.css">
    <link rel="stylesheet" href="https://alicdn.antdv.com/v1/63.f146f6e6.css">
    <style>
        /* * { margin: 0; padding: 0; box-sizing: border-box;font-size: 16px; }
        form { background: #dddddd; padding: 3px; height: 3.5em; position: fixed; bottom: 0; width: 100%; }
        form input { border: 0; width: 90%;height: 100%;font-size: 1.5em; margin-right: .5%; }
        form button { width: 9%;height: 100%; background: rgb(130, 224, 255);font-size: 1.8em; border: none; }
        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages li { padding: 5px 10px; } */
        #messages li:nth-child(odd) { background: #eee; }
      </style>
</head>
<body>
    <ul id="messages"></ul>
    <!-- <form action="">
      <input id="m" autocomplete="off" /><button>发送</button>
    </form> -->
    <div style="position: fixed; bottom: 0; width: 100%;">
        <span class="ant-input-search ant-input-search-enter-button ant-input-search-large ant-input-group-wrapper ant-input-group-wrapper-lg" data-v-a1ccd506=""><span class="ant-input-wrapper ant-input-group">
            <input id="m" placeholder="输入内容" type="text" class="ant-input ant-input-lg"><span class="ant-input-group-addon">
                <button type="button" id="btn" class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button"><span>Search</span></button></span></span></span>
    </div>
<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/3.0.0-rc4/socket.io.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js" rel="external nofollow" ></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.3/antd-with-locales.js"></script> -->
<script>
let params = window.location.search.slice(1)
let query = {}
window.location.search.slice(1).split('&').map(item=>{
    const [key,val] = item.split('=')
    query[key] = val
})

query.type = query.type||'type'
  $(function () {
    var socket = io(`${location.origin}?type=${query.type}`);
    $('#btn').click(function(){
      socket.emit(query.type, $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on(query.type, function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
</script>
</body>
</html>
posted @ 2020-09-24 17:24  GQiangQ  阅读(427)  评论(0)    收藏  举报