认识websocket|青训营笔记

用户9872462686675
108 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第7天

websoket：实现客户端和服务端之间的长链接，应用于实时通信的场景。

短连接和长连接的区别：

短连接是客户端向服务器端发送请求之后，服务器端处理和响应请求之后就断开连接;
短连接的优点是节省服务器资源。

长连接是客户端和服务器端建立长期有效的连接，服务器端开启的情况下，客户端可以随时和服务器端通信，不会在通信之后立刻销毁连接。
长连接的优点是不断开连接，可以完成实时通信。

长连接和短连接对应的应用场景：

长连接适用于操作频繁/点对点通讯等连接数不太多的情况，例如一些少人数实时通讯场景；
短连接适用于并发量大，且用户不需要进行频繁交互操作的时候。例如http服务，长连接对于服务端来说会耗费一定资源。

如何建立网页和服务器之间的websocket连接并且实现实时通信？

利用socket.io.(socket.io/))
socket.io是一个实时的双向的基于事件通信的网络通信库，实现了websocket，提供了简单API，抹平了浏览器兼容问题。

实现了三种通信方式

服务器端初始化，导入socket.io，express模块

npm install express --save
npm install socket.io --save

建立客户端和服务器端的websocket连接

客户端：

<button id="btn">建立websocket连接</button>
<script src="./socket.io.js"></script>
<script>
let socket;
btn.addEventListener('click', () => {
  socket = io("ws://127.0.0.1:3000/")
  console.log(socket)
})
</script>

服务端：

const app = require('express')(); //创建express服务
const http = require('http').createServer(app);
//创建socketio对象，通过io对象监听websocket长连接事件
const socketio = require('socket.io')(http, {
//解决客户端访问跨域问题
  cors: {
    origin: '*',
    methods: ['get', 'post'],
  },
});
 //监听客户端的websocket连接事件，connection
  //传入和客户端交互用的socket对象
socketio.on('connection', (socket) => {
  console.log('有客户端连接进来了', socket.id);
});
//启动http服务，监听3000端口发的请求
http.listen(3000, () => {
  console.log('开放了3000端口');
});
客户端发送，服务器接收消息
  <button id="btn1">点击我从客户端发送消息</button>
  <script src="./socket.io.js"></script>
  <script>
    let socket;
    btn.addEventListener('click', () => {
      socket = io("ws://127.0.0.1:3000/")
      console.log(socket)
    })
    btn1.addEventListener('click', e => {
      if (!socket) {
        alert('请先建立socket连接')
        return
      }
      //客户端发消息socket.emit(自定义消息类型，消息内容)
      socket.emit('testmsg', 'hello,i am yyy');
    })
  </script>

const app = require('express')(); //创建express服务
const http = require('http').createServer(app);
//创建socketio对象，通过io对象监听websocket长连接事件
const socketio = require('socket.io')(http, {
  cors: {
    origin: '*',
    methods: ['get', 'post'],
  },
});
socketio.on('connection', (socket) => {
  //监听客户端的websocket连接事件，connection
  //传入和客户端交互用的socket对象
  console.log('有客户端连接进来了', socket.id);
  //服务端接收消息
  socket.on('testmsg', (data) => {
    console.log('hello,i get your message,you say', data);
  });
});
//启动http服务，监听3000端口发的请求
http.listen(3000, () => {
  console.log('开放了3000端口');
});
服务器发送，客户端接收消息
  <script src="./socket.io.js"></script>
  <script>
    let socket;
    btn.addEventListener('click', () => {
      socket = io("ws://127.0.0.1:3000/")
      console.log(socket)
      //客户端接收消息，一旦和服务器建立连接就查看是否被发送了消息
      socket.on('testmsg', data => {
        console.log(data)
      })

    })
    btn1.addEventListener('click', e => {
      if (!socket) {
        alert('请先建立socket连接')
        return
      }
      //客户端发消息socket.emit(自定义消息类型，消息内容)
      socket.emit('testmsg', 'hello,i am yyy');
    })
  </script>

const app = require('express')(); //创建express服务
const http = require('http').createServer(app);
//创建socketio对象，通过io对象监听websocket长连接事件
const socketio = require('socket.io')(http, {
  cors: {
    origin: '*',
    methods: ['get', 'post'],
  },
});

socketio.on('connection', (socket) => {
  //监听客户端的websocket连接事件，connection
  //传入和客户端交互用的socket对象
  console.log('有客户端连接进来了', socket.id);
  //服务端接收消息
  socket.on('testmsg', (data) => {
    console.log('hello,i get your message,you say', data);
  });
  socket.emit('testmsg', 'hi，i am 服务端');

});
//启动http服务，监听3000端口发的请求
http.listen(3000, () => {
  console.log('开放了3000端口');
});

服务器向所有建立了连接的客户端广播消息

<button id="btn3">发送广播消息请求</button>
<script src="./socket.io.js"></script>
<script>
let socket;
btn.addEventListener('click', () => {
  socket = io("ws://127.0.0.1:3000/")
  console.log(socket)
  //客户端接收消息，一旦和服务器建立连接就查看是否被发送了消息
  socket.on('testmsg', data => {
    console.log(data)
  })

})
btn1.addEventListener('click', e => {
  if (!socket) {
    alert('请先建立socket连接')
    return
  }
  //客户端发消息socket.emit(自定义消息类型，消息内容)
  socket.emit('testmsg', 'hello,i am yyy');
})
 btn3.addEventListener('click', e => {
  if (!socket) {
    alert('请先建立socket连接')
    return
  }
  socket.emit('testmsg', '发个广播信息');
})
</script>

const app = require('express')(); //创建express服务
const http = require('http').createServer(app);
//创建socketio对象，通过io对象监听websocket长连接事件
const socketio = require('socket.io')(http, {
  cors: {
    origin: '*',
    methods: ['get', 'post'],
  },
});

socketio.on('connection', (socket) => {
  //监听客户端的websocket连接事件，connection
  //传入和客户端交互用的socket对象
  console.log('有客户端连接进来了', socket.id);
  //服务端接收消息
  socket.on('testmsg', (data) => {
    console.log('hello,i get your message,you say', data);
  });
  //服务器端发送广播信息
   if (/发个广播信息/.test(data)) {
      socketio.emit('testmsg', '满足你，发送一个广播信息给大家');
    } else socket.emit('testmsg', 'hi，i am 服务端');

});
//启动http服务，监听3000端口发的请求
http.listen(3000, () => {
  console.log('开放了3000端口');
});
avatar
文章
阅读
粉丝