webscoket的demo实现

WebSocket 是什么

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。

WebSocket同样是HTML 5规范的组成部分之一，现标准版本为 RFC 6455。WebSocket 相较于上述几种连接方式，实现原理较为复杂，用一句话概括就是：客户端向 WebSocket 服务器通知（notify）一个带有所有 接收者ID（recipients IDs）的事件（event），服务器接收后立即通知所有活跃的（active）客户端，只有ID在接收者ID序列中的客户端才会处理这个事件。由于 WebSocket 本身是基于TCP协议的，所以在服务器端我们可以采用构建 TCP Socket 服务器的方式来构建 WebSocket 服务器。

WebSocket 是一种全新的协议。它将 TCP 的 Socket（套接字）应用在了web page上，从而使通信双方建立起一个保持在活动状态连接通道，并且属于全双工（双方同时进行双向通信）。

WebSocket 协议是借用 HTTP协议 的 101 switch protocol 来达到协议转换的，从HTTP协议切换成WebSocket通信协议。

最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。其他特点包括：

• 建立在 TCP 协议之上，服务器端的实现比较容易。
• 与 HTTP 协议有着良好的兼容性。默认端口也是 80 和 443 ，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
• 数据格式比较轻量，性能开销小，通信高效。
• 可以发送文本，也可以发送二进制数据。
• 没有同源限制，客户端可以与任意服务器通信。
• 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

WebSocket协议被设计来取代现有的使用HTTP作为传输层的双向通信技术，并受益于现有的基础设施（代理、过滤、身份验证）。

概述

本协议有两部分：握手和数据传输。

概述一个简单的demo

一、node 安装 npm install ws

服务端代码：启动服务，接收传来的信息，每隔2s返回数据。

实际使用的时候需要异常处理

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);
var timer = setInterval(function(){
ws.send(message+timer);
},2000)
});
});

 

二、客户端代码 连接后监听端口

//即时通讯

function openWebSocket(){

if ('WebSocket' in window){
var ws = new WebSocket("ws://localhost:8181");
//连接成功建立的回调方法
ws.onopen = function () {
console.log("WebSocket连接成功");
}
//接收到消息的回调方法
ws.onmessage = function (event) {
console.log(event.data);
}
//连接关闭的回调方法
ws.onclose = function () {
console.log("WebSocket连接关闭");
}
//关闭WebSocket连接
function closeWebSocket() {
ws.close();
}
//发送消息
function send(message,key) {
if(ws.readyState===1){
ws.send(message);
}else{
if(key != 0){
key = key==undefined?3:key;
setTimeout(function(){
send(message,key);
},500);
}else{
console.log('连接未完成，发生失败');
}
}
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
closeWebSocket();
}
send('这是什么');
}else{
console.log('不支持通信');
}
}
openWebSocket();