前端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的功能呢？下面就介绍一下几种常见的解决方案：
