前端JS-websocket与后端通信

1.WebSocket是什么？

WebSocket是html5提供的一种在单个TCP连接上进行双向通信的协议，解决了客户端和服务端之间的实时的通信问题。

WebSocket一般用于前端和后端的双向通信，前端需要主动向后端发送消息，或者是后端需要实时的频繁的向前端发送消息。

 

2.为什么要用websocket？

传统方式：网站为了实现数据推送，所用的技术都是ajax轮询。轮询是在特定的时间间隔，由浏览器主动发起请求，将服务器的数据拉回来展示到页面中。轮询需要不断的向服务器发送请求，会占用很多带宽和服务器资源。

WebSocket：浏览器和服务器只需完成一次握手，两者之间就可以创建一个持久性的TCP连接，此后服务器和客户端通过此TCP连接进行双向实时通信。

WebSocket建立TCP连接后，服务器可以主动给客户端传递数据，能够更好的节省服务器资源和带宽，实现更实时的数据通讯。

websocket的特点：

websocket，他最大的特点就是服务端可以主动向客户端推送消息，客户端也可以主动向服务端发送消息，实现了真正的平等。 

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL

 

 3.如何使用？

原生使用-前端：vue中使用H5原生WebSocket对象

<template>
  <div class="dashboard-container"> 
     <el-form ref="sendForm"   class="login-form"  label-position="left">
      <div class="title-container">
        <h3 class="title">发送信息  </h3>
      </div>

      <el-form-item    >
        <span class="svg-container" style="width:20px;margin-right: 10px;">
          <svg-icon icon-class="user" />
        </span>
        <el-input  ref="sendText" placeholder="发送信息" style="width:calc(100% - 30px);"  name="sendText"  v-model="sendText"   type="text"
        />
      </el-form-item>
       <el-button   ref="sendBttton" value="发送" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="sendMsg($event)">发送</el-button>
 <div ref="incomming" ></div>
 </el-form>
  </div>
</template>

<script> 
export default { 
data() {
      return {
        sendText:"",

        websock: null,
      }
    },
   created() {
      this.initWebSocket();
    },
    destroyed() {
      this.websock.close() //离开路由之后断开websocket连接
    },
    methods: {
      sendMsg(){
        var input =  this.$refs.sendText  ;
        this.websocketsend(input.value);
        input.value = "";
      },
      initWebSocket(){ //初始化weosocket
        var websockImpl = window. WebSocket || window. MozWebSocket;
        const wsuri = 'ws://127.0.0.1:7181/qrCodePage/0912';
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数据
        let actions = {"test":"12345"};
        this.websocketsend(JSON.stringify(actions));
      },
      websocketonerror(){//连接建立失败重连
        this.initWebSocket();
      },
      websocketonmessage(e){ //数据接收
        if(e.data )
         {  const redata = JSON.parse(e.data);
         var inc =  this.$refs.incomming  ;
         inc.innerHTML += e.data + '<br/>';
         }
      },
      websocketsend(Data){//数据发送
         if(Data ) this.websock.send(Data);
      },
      websocketclose(e){  //关闭
        console.log('断开连接',e);
      },
    },
}
</script>

<style lang="scss" scoped>
 
</style>

　　

原生使用-C#后端： 即要在NuGet导入“Fleck”包，！！注意需 .NET Framework 4.5及以上

 static void Main(string[] args)
        {
            
            //先下载https://www.nuget.org/packages/Fleck/， 即要在NuGet导入“Fleck”包，！！注意需 .NET Framework 4.5及以上
            FleckLog.Level = LogLevel.Debug;
            var allSockets = new List<IWebSocketConnection>();
            var server = new WebSocketServer("ws://127.0.0.1:7181/qrCodePage/0912");
            server.Start(socket =>
            {
                socket.OnOpen = () =>
                {
                    Console.WriteLine("Open!");
                    allSockets.Add(socket);
                };
                socket.OnClose = () =>
                {
                    Console.WriteLine("Close!");
                    allSockets.Remove(socket);
                };
                socket.OnMessage = message =>
                {
                    Console.WriteLine(message);
                    allSockets.ToList().ForEach(s => s.Send("Echo: " + message));
                };
            });


            var input = Console.ReadLine();
            while (input != "exit")
            {
                foreach (var socket in allSockets.ToList())
                {
                    socket.Send(input);
                }
                input = Console.ReadLine();
            }
        }

　　

4.兼容性

随着HTML5的普及，现代浏览器（IE10+）基本上都已经原生支持WebSocket了，下面是支持WebSocket协议的浏览器：

• Internet Explorer 10
• Firefox 6
• Chrome 14
• Safari 6.0
• Opera 12.1
• iOS Safari 6.0
• Chrome for Android 27.0 但是对于旧的浏览器该如何实现WebSocket的功能呢？下面就介绍一下几种常见的解决方案：

（1）SockJS是一个JavaScript库，它会优先使用原生的WebSocket；如果不支持，则使用streaming；如果streaming也不支持，则使用轮询（polling） 

（2）Socket.IO能够启用基于事件的双向通信，使用它同样也需要搭建相应的服务端；首先它也会首选WebSocket，如果不支持则会使用其他替代方案