为什么需要 WebSocket？
初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？
答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。
举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用["轮询"]每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。
轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。
前端使用WebSocket的API
## WebSocket 属性
readyState属性返回实例对象的当前状态，共有四种。
0 CONNECTING 表示正在连接
1 OPEN 表示连接成功，可以通信了
2 CLOSING 表示连接正在关闭
3 CLOSED 表示连接已经关闭，或者打开连接失败
回调函数
socket.onopen=function(){
console.log('建立连接');
socket.send('连接上了'); //发送会话
socket.close();
}
socket.onmessage=function(event){
var data = event.data;
console.log('接收会话');
}
socket.onerror=function(event){
console.log('打印错误',event);
}
socket.onclose=function(event){
console.log('关闭连接');
}
以上回调函数也可以用事件监听处理函数来调用,例如:
socket.addEventListener('message',function(event){
console.log(event.data);//do something
})
前端整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>首页</p>
</body>
</html>
<script>
var newWeb = function () {
var url = "ws://10.20.23.115:8098/echo"
console.log(url);
var ws = new WebSocket(url);
ws.onopen = function () {
ws.send('老子终于连上了');
}
ws.onmessage = function (evt) {
console.log(evt.data);
ws.close();
};
ws.onclose = function (evt) {
console.log("WebSocketClosed!");
};
ws.onerror = function (evt) {
console.log('WebSocketError!');
};
}
newWeb();
</script>
后端对websocket的处理
目前我是用node进行配置
下载插件
npm install express-ws
由于我用的是express框架,所以我用的是express-ws这个中间件,其他中间件的用法几乎都是大同小异
var app = express();
var expressWs = require('express-ws')(app);
app.ws('/echo', function(ws, req) {
ws.on('message', function(msg) {
ws.send('进来了');
});
});
这里是直接写在入口文件app.js中的,那么这里要值得注意的是要放在注册路由前面
如果放在路由后面就会没有效果,那么如果要在路由系统中使用也是可有的,注册方式需要改变一下,在index.js路由文件里
var expressWs = require('express-ws')(router);
router.ws('/echo', function(ws, req) {
ws.on('message', function(msg) {
ws.send('进来了');
});
});
不过在app.js中也需要注册一下app,例如 var expressWs = require('express-ws')(app);
启动程序如图
简单的websocket实例算是跑通了,
