• 服务器推送数据之websocket、socket.io及实现简易聊天系统

    websocket

    • WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议;
    • 使用协议：ws，其基于 HTTP 协议进行数据传输，但是会持久化链接和状态。
    • https://socket.io/

    基于 node.js 的 WebSocket 库

    • 服务端
     // 创建websocket服务器
  var WebSocketServer = require('ws').Server,
  wss = new WebSocketServer({ port: 8181 });
  wss.on('connection', function (ws) {
      console.log('client connected');
      ws.on('message', function (message) {
        	//监听接收的数据
          console.log(message);
      });
    	setInterval(() => {
          let somedata = {
              name:"张三",
              age:20
          }
          ws.send(JSON.stringify(somedata));
      }, 1000);
  });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 客户端
      • 建立握手
          var ws = new WebSocket("ws://localhost:8181");

      • 1
      • 打开协议
        	ws.onopen = function () {}

      • 1
      • 发送数据到服务端
          ws.send("客户端数据");

      • 1
      • 关闭协议:关闭协议后不能发送数据
          ws.close();

      • 1
      • 接收消息
          ws.onmessage = function(e){
             // console.log(e.data);
    }

      • 1
      • 2
      • 3

    socket.io模块

    • socket.io是将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口。兼容所有浏览器，解决浏览器不兼容问题。
    • 服务端
      const server = require('http').createServer(app.callback());
  const io = require('socket.io')(server);
  server.listen(3000);

    • 1
    • 2
    • 3
    • 客户端
      let socket = io.connect();
  this.emit("clientfn","hello i am client");
  socket.on("message",function(data){}

    • 1
    • 2
    • 3

    demo

    • 简易聊天系统
    • npm install koa koa-static-cache socket.io
    • app.js
    const Koa = require('koa');
const KoaStaticCache = require('koa-static-cache')
const app = new Koa();
app.use(KoaStaticCache('./public', {
    prefix: '/public',
    gzip: true,
    dynamic: true
}))
// 因为koa对http有过二次封装
const server = require('http').createServer(app.callback());
const users = [];
const options = { /* ... */ };
// io 的第一个参数接收的是原始http对象
const io = require('socket.io')(server, options);
io.on('connection', socket => { 
    users.push({
       id:  socket.id
    });
    console.log('有人通过socket链接了');
    // 通知当前的socket
    socket.emit('hello', `欢迎您 ${socket.id}`);
    //通过socket通知给其它socket
    socket.broadcast.emit('hello', `有新的朋友加入 ${socket.id}，我们欢迎！👏他`);
    socket.broadcast.emit('userUpdate', users);
    socket.on('message', data => {
        socket.broadcast.emit('message', `${socket.id} 说：${data}`);
    })
 });
server.listen(8081);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • public/index.html
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <textarea name="" id="textarea" cols="60" rows="10">textarea>
    <input type="text" id="content">
    <button id="btn">发送button>
    <script src="/socket.io/socket.io.js">script>
    <script>
        let textarea = document.querySelector('#textarea');
        let content = document.querySelector('#content');
        let btn = document.querySelector('#btn');

        // 通过http请求，告诉服务器我要使用ws协议了，因为ws协议是根据已有的http协议升级而成的
        const socket = io('/');
        socket.on('hello', data => {
            writeData(data);
        })
        socket.on('message', data => {
            writeData(data);
        })
        socket.on('userUpdate', data => {
            console.log(data)
        })
        btn.onclick = function() {
            writeData('我说：' + content.value);
            socket.emit('message', content.value);
            content.value = '';
            content.focus();
        }
        function writeData(data) {
            textarea.innerHTML += data + '\r\n';
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 访问：http://localhost:8081/public/index.html，打开多个窗口，切换窗口发送内容
  • 相关阅读:
    pytest+yaml实现接口自动化框架
    Java基础之抽象类和抽象方法（最简单最详细）
    无问芯穹获近 10 亿元累计融资，致力于成为大模型时代首选的“算力运营商”
    Java中String类型的hashCode实现
    企业有了BI，为什么还需要以指标为核心的ABI平台？
    隐私计算FATE-离线预测
    重入锁ReentrantLock详解
    无代码开发平台应用可见权限设置入门教程
    k8s_base
    git使用
  • 原文地址：https://blog.csdn.net/weixin_44178305/article/details/127956156