nodejs socket.io框架快速入门

最新推荐文章于 2024-08-19 16:53:37 发布

胖鹅68

最新推荐文章于 2024-08-19 16:53:37 发布

阅读量1.5k

点赞数

分类专栏： nodejs、npm、express、gulp

本文链接：https://blog.csdn.net/hbiao68/article/details/106930331

版权

nodejs、npm、express、gulp 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

文章目录

文章参考

why socket.io ?

Socket.IO是一个开源的WebSocket库，它通过Node.js实现WebSocket服务端，同时也提供客户端JS库。Socket.IO支持以事件为基础的实时双向通讯，它可以工作在任何平台、浏览器或移动设备。

Socket.IO支持4种协议：WebSocket、htmlfile、xhr-polling、jsonp-polling，它会自动根据浏览器选择适合的通讯方式，从而让开发者可以聚焦到功能的实现而不是平台的兼容性，同时Socket.IO具有不错的稳定性和性能。

安装

服务器

cnpm install -D socket.io

客户端

cnpm install -D socket.io-client

使用方式

服务端

const io = require('socket.io')();
io.on('connection', client => { ... });
io.listen(3000);

客户端

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io('http://localhost');
  socket.on('connect', function(){});
  socket.on('event', function(data){});
  socket.on('disconnect', function(){});
</script>

express+sockket.io案例

app服务器

var app = express();
var socketRouter = require('./src/routes/socketRouter');
app.use('/socket', socketRouter());

socket监听的事件

let socketObj
let io = require('socket.io')();
// 单独创建一个端口
io.listen(3333)

function initSocket (server) {

  // io 各种事件
  io.on('connection', function (socket) {
    console.log('websocket has connected')
    socketObj = socket

     // 创建房间
     socket.on('createroom', req => {
      let roomid = req.roomid
      socket.join(roomid)
      socket.to(roomid).emit('message', {
        msg: roomid
      });
      socket.emit('message', {
        msg: '创建房间' + roomid + '成功'
      })
    });

    // 接受消息
    socket.on('sayMsg', req => {
      let roomid = req.roomid
      let msg = req.msg

      socket.to(roomid).emit('message', {
        roomid: roomid,
        msg: msg
      })
      // socket.emit('message', {
      //   msg: '创建房间' + roomid + '成功'
      // })
    });
  })

  return router;
}

module.exports = initSocket;

客户端建立连接和监听事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    input {
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #bfcbd9;
      box-sizing: border-box;
      color: #1f2d3d;
      font-size: inherit;
      height: 40px;
      line-height: 1;
      outline: 0;
      padding: 3px 10px;
    }
    .el-button--primary {
      color: #fff;
      background-color: #20a0ff;
      border-color: #20a0ff;
    }
    .el-button {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background: #00aac5;
      border: 1px solid #c4c4c4;
      color: #fff;
      margin: 0;
      padding: 10px 15px;
      border-radius: 4px;
      outline: 0;
      text-align: center;
    }
  </style>
</head>
<body>
  <div>
    <div id="content">
    </div>
  </div>
  <div>
    <input type="text" id="input">
    <ul>
      <li>
        <button class="el-button el-button--primary el-button--large" type="button" onclick="startConnect()"><span>开始连接</span></button>
        <button class="el-button el-button--primary el-button--large" type="button" onclick="createRoom()"><span>创建房间号</span></button>
        <button class="el-button el-button--primary el-button--large" type="button" onclick="sendMsg()"><span>测试发送消息</span></button>
      </li>
    </ul>
  </div>
  <!-- 注意，这里的静态资源一定要是绝对路径，否则会被拦截 -->
  <script src="./socket.io.js"></script>
  <script>
    var socket
    let roomid = new Date().getTime()
    // 开始连接
    function startConnect () {
      socket = io.connect('ws://localhost:3333');

      socket.on('message', function (data) {
        let html = document.createElement('p')
        html.innerHTML = `系统消息：<span>${data.msg}</span>`
        document.getElementById('content').appendChild(html)
        console.log(data);
      });
      // createRoom () 
    }
    // 创建房间号
    function createRoom () {
      console.log(roomid)
      socket.emit('createroom', { 
        roomid: roomid
      });
    }
    // 向指定的房间号发送消息
    function sendMsg () {
      // 获取yinput 表单里面的值
      let t = document.getElementById('input').value
      if (!t) return
      let html = document.createElement('p')
      html.innerHTML = `你细声说：<span>${t}</span>`
      document.getElementById('content').appendChild(html)
      socket.emit('sayMsg', { 
        roomid: roomid,
        msg: t
      });
    }

  </script>
</body>
</html>