做一个websocket简单的尝试，node和客户端能够成功链接并且能正常接收发送数据。
一.websocket简介
WebSocket是基于TCP的应用层协议，用于在C/S架构的应用中实现双向通信。
需要特别注意的是：虽然WebSocket协议在建立连接时会使用HTTP协议，但这并不意味着WebSocket协议是基于HTTP协议实现的。
二.node实现
node 不能直接使用websocket，需要安装支持websocket的包，这里用的是nodejs-websocket，
安装：npm install nodejs-websocket
const ws = require("nodejs-websocket");
//定义一个arr，用于收集多用户信息
const arr = {
};
ws.createServer(function (socket) {
//连接成功的回调
//监听数据，当客户端传来数据时的操作
socket.on("text", function (str) {
var data = JSON.parse(str); //数据只能是以字符串或buffer形式传递，所以这里要转换成JSON；
if (arr[data.username]) {
//如果不是第一次连接
//将用户发来的信息对所有用户发一遍
for (var item in arr) {
arr[item].sendText(
JSON.stringify({
username: data.username,
text: data.mes,
})
);
}
} else {
//如果是第一次连接
arr[data.username] = socket;
}
});
})
.listen(4000);
三.客户端实现
新建一个html文件
<!DOCTYPE html>
<head>
<title>
</title>
<style>
.chatContext {
width: 100px;
height: 300px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="chatContext"></div>
<input id="input" />
<button id="send">发送</button>
<script type="text/javascript">
var localChat = [];
//这里对localChat 的push方法进行了重写，只要localChat 有数据push进来就对#chatContext重新渲染
var arrayProto = Array.prototype;
var arrayMethod = Object.create(arrayProto);
arrayMethod.push = function () {
var original = arrayProto.push;
var _result = original.apply(this, arguments);
var _html = '';
localChat.forEach(mes => {
_html += mes.username + ':';
_html += mes.text + '</br>';
})
document.getElementById('chatContext').innerHTML = _html;
return _result;
}
localChat.__proto__ = arrayMethod;
//建立一个websocket，上面node里我们提到过，websocket只能传输字符串或者buffer，所以我们发送的数据要转换成字符串
var ws = new WebSocket("ws:127.0.0.1:4000");
//与服务器连接成功后向服务端发送一条数据
ws.onopen = function () {
ws.send(JSON.stringify({
username: '会飞',
mes: ''
}))
}
//当从服务端接受到参数时,向localChat push一条数据，上面我们已经对localChat 的push方法重写，这时候页面会渲染
ws.onmessage = function (data) {
localChat.push(JSON.parse(data.data))
}
//监听点击事件，当点击发送时，像服务端发送一条数据；
document.getElementById('send').onclick = function () {
var _mes = document.getElementById('input').value;
ws.send(JSON.stringify({
username: '会飞',
mes: _mes
}))
}
</script>
</body>
</html>
一个html页面就完成了，我们可以再复制一个，以便测试websocket是否能实时推送数据
四.成功连接
我们现在已经有一个node文件server.js和两个html文件
执行node server.js启动服务端，打开两个html文件，已经能够正常通信
[扩展]socket.io https://zhuanlan.zhihu.com/p/29148869