webSocket和Socket.IO框架 在vue项目中使用websocket

HTTP无法轻松实现实时应用：

● HTTP协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。
● 我们可以非常轻松的捕获浏览器上发生的事件（比如用户点击了盒子），这个事件可以轻松产生与服务器的数据交互（比如Ajax）。但是，反过来却是不可能的：服务器端发生了一个事件，服务器无法将这个事件的信息实时主动通知它的客户端。只有在客户端查询服务器的当前状态的时候，所发生事件的信息才会从服务器传递到客户端。

    // if ('WebSocket' in window) {
    //     this.socket = new WebSocket(this.wsuri)
    //     socket.onopen = function (event) {
    //         //想要验证是否连接成功可以给后台发一个消息

    //         socket.send('我已经连接成功了么');

    //         // 这个事件监听，可以监听后台返回来给你的消息，即str就是

    //         socket.onmessage = function (str) {
    //             console.log(str);

    //         };

    //         // 监听Socket的关闭

    //         socket.onclose = function (str) {
    //             console.log(str);

    //         };

    //         // 关闭Socket.... (需要的时候把注释去掉)

    //         //socket.close() ;

    //     };
    //     console.log('支持websocket')
    // } else {
    //     console.log('您的浏览器不支持websocket')
    // }
    // $.ajax({
    //     type: "post",   //请求类型
    //     dataType: "json",   //请求数据返回类型
    //     async: true, 
    //     url: "https://aliyun.firehua.top/admin/json_data/sent_data",    //请求地址
    //     data: {},       //表单序列化
    //     success: function (result) {        //成功
    //         console.log(result);
    //         if (result.code === 200) {
    //             console.log(result);
    //             console.log("成功");
    //             // $("#name").text(result.data.name);
    //             // $("#phone").text(result.data.phone);
    //             // $("#sex").text(result.data.sex);
    //         } else {
    //             console.log(result);
    //             console.log("失败");
    //         }
    //     },
    //     error: function (result) {      //失败
    //         console.log(result);
    //         console.log("异常");
    //     }
    // })


    var webSocket;
    //HTTP处理程序的地址
    var handlerUrl = "ws://localhost:8082/api/Values";

    function doConnection() {
        InitWebSocket();
    }

    function SendData() {
        var input = document.getElementById('sendText');
        //初始化WebSocket
        InitWebSocket();
        //如果WebSocket打开，发送数据
        if (webSocket.OPEN && webSocket.readyState == 1) {
            if (input.value != "")
                webSocket.send(input.value);
        }

        //如果WebSocket关闭，显示消息
        if (webSocket.readyState == 2 || webSocket.readyState == 3) {
            alert("WebSocket关闭了，无法发送数据");
        }
    }

    function CloseWebSocket() {
        webSocket.close();
        webSocket = undefined;
    }

    function InitWebSocket() {

        //如果WebSocket对象未初始化，我们将初始化它
        if (webSocket == undefined) {
            webSocket = new WebSocket(handlerUrl);

            //打开连接处理程序
            webSocket.onopen = function () {
                alert("WebSocket已连接");
            };

            //消息数据处理程序
            webSocket.onmessage = function (e) {
                var label = '<li>' + e.data + '</li>';
                $("#receiveText").append(label);
            };

            //关闭事件处理程序
            webSocket.onclose = function () {
                alert("WebSocket closed.");
            };

            //错误事件处理程序
            webSocket.onerror = function (e) {
                alert(e.message);
            };
        }
        else {
            //webSocket.open();没有open方法
        }
    }

    function doDeleteConnection(devid) {
        //初始化WebSocket
        InitWebSocket();

        //如果WebSocket打开，发送数据
        if (webSocket.OPEN && webSocket.readyState == 1) {

            webSocket.send("DelConnection^" + devid);
        }

        //如果WebSocket关闭，显示消息
        if (webSocket.readyState == 2 || webSocket.readyState == 3) {
            //document.getElementById("di_span").innerText = "WebSocket关闭了，无法发送数据";
            alert("WebSocket关闭了，无法发送数据");
        }
    }

WebSocket协议能够让浏览器和服务器全双工实时通信，互相的，服务器也能主动通知客户端了。

● WebSocket的原理非常的简单：利用HTTP请求产生握手，HTTP头部中含有WebSocket协议的请求，所以握手之后，二者转用TCP协议进行交流（QQ的协议）。现在的浏览器和服务器之间，就是QQ和QQ服务器的关系了。
所以WebSocket协议，需要浏览器支持，更需要服务器支持。
● 支持WebSocket协议的浏览器有：Chrome 4、火狐4、IE10、Safari5
● 支持WebSocket协议的服务器有：Node 0、Apach7.0.2、Nginx1.3

Node.js上需要写一些程序，来处理TCP请求。
● Node.js从诞生之日起，就支持WebSocket协议。不过，从底层一步一步搭建一个Socket服务器很费劲（想象一下Node写一个静态文件服务都那么费劲）。所以，有大神帮我们写了一个库Socket.IO。
● Socket.IO是业界良心，新手福音。它屏蔽了所有底层细节，让顶层调用非常简单。并且还为不支持WebSocket协议的浏览器，提供了长轮询的透明模拟机制。
● Node的单线程、非阻塞I/O、事件驱动机制，使它非常适合Socket服务器。

网址：http://socket.io/

我们来看怎么做

先要npm下载这个库
1npm install socket.io

写原生的JS，搭建一个服务器，server创建好之后，创建一个io对象
1var http = require("http");
2
3var server = http.createServer(function(req,res){
4 res.end("你好");
5});
6
7var io = require('socket.io')(server);
//监听连接事件
io.on("connection",function(socket){

console.log("1个客户端连接了");

})

8
9server.listen(3000,"127.0.0.1");
写完这句话之后，你就会发现，http://127.0.0.1:3000/socket.... 就是一个js文件的地址了。

现在需要制作一个index页面，这个页面中，必须引用秘密js文件。调用io函数，取得socket对象。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6</head>
7<body>
8 <h1>我是index页面，我引用了秘密script文件</h1>
9 <script type="text/javascript" src="/socket.io/socket.io.js"></script>
10 <script type="text/javascript">
11 var socket = io();
12 </script>
13</body>
14</html>

此时，在服务器上，app.js中就要书写静态文件呈递程序，能够呈递静态页面。
1var server = http.createServer(function(req,res){
2 if(req.url == "/"){
3 //显示首页
4 fs.readFile("./index.html",function(err,data){
5 res.end(data);
6 });
7 }
8});

至此，服务器和客户端都有socket对象了。服务器的socket对象：

服务器端的：

var io = require('socket.io')(server);
//监听连接事件
io.on("connection",function(socket){
    console.log("1个客户端连接了");
    socket.on("tiwen",function(msg){
        console.log("本服务器得到了一个提问" + msg);
        socket.emit("huida","吃了");
    });
});

每一个连接上来的用户，都有一个socket。由于我们的emit语句，是socket.emit()发出的，所以指的是向这个客户端发出语句。

广播，就是给所有当前连接的用户发送信息：

//创建一个io对象 
var io = require('socket.io')(server);
//监听连接事件
io.on("connection",function(socket){
    console.log("1个客户端连接了");
    socket.on("tiwen",function(msg){
        console.log("本服务器得到了一个提问" + msg);
        io.emit("huida","吃了");
    });
});

在vue项目中使用websocket

utils/utils

heartCheck = {
  timeout: 60 * 1000,
  timer: null,
  serverTimer: null,
  reset() {
    this.timer && clearTimeout(this.timer)
    this.serverTimer && clearTimeout(this.serverTimer)
  },
  start(ws) {
    this.reset()
    this.timer = setTimeout(() => {
      // console.log('发送心跳,后端收到后，返回一个心跳消息')
      // onmessage拿到返回的心跳就说明连接正常
      ws.send(JSON.stringify({ heart: 1 }))
      this.serverTimer = setTimeout(() => {
        // 如果超过一定时间还没响应(响应后触发重置)，说明后端断开了
        ws.close()
      }, this.timeout)
    }, this.timeout)
  }
}


 /* 获取时间戳加随机字符 */
 export function randomString (len) {
  len = len || 32
  let timestamp = new Date().getTime()
  /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  let maxPos = $chars.length
  let randomStr = ''
  for (let i = 0; i < len; i++) {
    randomStr += $chars.charAt(Math.floor(Math.random() * maxPos))
  }
  return randomStr + timestamp
}

websocket.js


  import {heartCheck} from "@/utils/utils"
  export default {
    name: 'Websocket',
    data() {
      return {
        // wsuri: 'ws://123.207.167.163:9010/ajaxchattest', // ws wss
        lockReconnect: false, // 连接失败不进行重连
        maxReconnect: 5, // 最大重连次数，若连接失败
        socket: null
      }
    },
    mounted() {
      this.initWebSocket()
    },
    methods: {
      reconnect() {
        console.log('尝试重连')
        if (this.lockReconnect || this.maxReconnect <= 0) {
          return
        }
        setTimeout(() => {
          // this.maxReconnect-- // 不做限制 连不上一直重连
          this.initWebSocket()
        }, 60 * 1000)
      },
      initWebSocket() {
        try {
          if ('WebSocket' in window) {
            this.socket = new WebSocket(this.wsuri)
          } else {
            console.log('您的浏览器不支持websocket')
          }
          this.socket.onopen = this.websocketonopen
          this.socket.onerror = this.websocketonerror
          this.socket.onmessage = this.websocketonmessage
          this.socket.onclose = this.websocketclose
        } catch (e) {
          this.reconnect()
        }
      },
      websocketonopen() {
        console.log('WebSocket连接成功', this.socket.readyState)
        heartCheck.start(this.socket)
        // this.socket.send('发送数据')
        this.websocketsend()
      },
      websocketonerror(e) {
        console.log('WebSocket连接发生错误', e)
        this.reconnect()
      },
      // websocketonmessage(e) {
      //   let data = JSON.parse(e.data)
      //   console.log('得到响应', data)
      //   console.log('可以渲染网页数据...')
        // 消息获取成功，重置心跳
      //   heartCheck.start(this.socket)
      // },
      websocketclose(e) {
        console.log('connection closed (' + e.code + ')')
        this.reconnect()
      },
      websocketsend() {
        let data = { id: 'a1b2c3' }
        this.socket.send(JSON.stringify(data))
      }
    },
    destroyed() {
      this.socket.close()
    }
  }

然后在项目中混入

import websocket from '@/utils/websocket'
import { heartCheck,randomString } from '@/utils/utils'

mixins: [websocket],

 data () {
    return {
      wsuri: `ws://192.456.164:9038/websocket/${randomString(10)}`,
}
}


methods:{
 websocketonmessage (e) {
      let a = JSON.parse(e.data)
      console.log('得到响应', a)
      if (a.type == 3) {
        this.TaskQueue.push(a.listReminder)
        console.log(this.TaskQueue, 'this.TaskQueue')
        this.animationMove()
      }
      heartCheck.start(this.socket)
    },
}

webSocket和Socket.IO框架在vue项目中使用websocket

HTTP无法轻松实现实时应用：

我们来看怎么做

在vue项目中使用websocket

HappyCodingTop

引用和评论

早已忘却的面试题，需要在隆冬忆起

解决lodash由于依赖错误导致无法启动的问题

阿里云ECS服务器部署Node.js项目全过程详解

SAP Fiori应用的三种部署方式

Node.js学习备案

解决nvm install node 出现错误

运行npm update等命令出错后如何分析问题根源

webSocket和Socket.IO框架 在vue项目中使用websocket

HTTP无法轻松实现实时应用：

我们来看怎么做

在vue项目中使用websocket

HappyCodingTop

引用和评论

早已忘却的面试题，需要在隆冬忆起

解决lodash由于依赖错误导致无法启动的问题

阿里云ECS服务器部署Node.js项目全过程详解

SAP Fiori应用的三种部署方式

Node.js学习备案

解决nvm install node 出现错误

运行npm update等命令出错后如何分析问题根源

webSocket和Socket.IO框架在vue项目中使用websocket