运行WebSocket首先要检查的配置环境:
首先下载并安装node环境
然后安装淘宝镜像,这样下载会快很多
npm config set registry https://registry.npm.taobao.org
如果想检测一下是否安装成功,输入
npm config get registry
此时会出现 https://registry.npm.taobao.org/这个地址,说明安装成功
此时就在项目的根目录文件夹中打开命令窗口,输入
npm install websocket
进行安装WebSocket,成功后目录中会出现一个node_modules这样的文件夹表示安装成功
创建服务器端口
此时创建一个空的js文件,准备在npm官网中打开WebSocket进行创建一个server代码块,官方文档里有示例代码,复制即可
//引入websocket服务模块,然后再引入http,因为需要http来进行支持
var WebSocketServer = require('websocket').server;
var http = require('http');
//创建服务器
var server = http.createServer(function(request, response) {
console.log((new Date()) + ' Received request for ' + request.url);
response.writeHead(404);
response.end();
});
//进行监听
server.listen(3000, function() {
console.log((new Date()) + ' Server is listening on port 3000');
});
//创建WebSocket服务器
wsServer = new WebSocketServer({
httpServer: server
});
//WebSocket建立连接
wsServer.on('request', function(request) {
//当前的连接使用一个子协议
var connection = request.accept(null, request.origin);
console.log((new Date()) + '已经建立连接');
//监听当前连接 当发送message的时候进行监听,判断类型是utf8和二进制binary
connection.on('message', function(message) {
if (message.type === 'utf8') {
console.log('Received Message: ' + message.utf8Data);
connection.sendUTF(message.utf8Data);
}
else if (message.type === 'binary') {
console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
connection.sendBytes(message.binaryData);
}
});
//监听当前连接关闭的时候触发
connection.on('close', function(reasonCode, description) {
console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' 断开连接');
});
});
注:以上代码已有略微删减,删减的部分并不影响使用
然后再创建一个html页面用于客户端连接
<script>
//创建websocket对象
var ws = new WebSocket('ws://localhost:3000');
//监听建立连接
ws.onopen=function(res){
console.log('连接成功');
console.log(res)
}
//监听有新消息
ws.onmessage=function(res){
console.log('有新消息')
console.log(res)
}
</script>
服务器和客户端都创建好了之后,在根目录下打开命令行工具,输入“node 上面创建的js服务器”来创建服务器
然后运行客户端这个html文件,在控制台可以看到 连接成功 并打印出了连接成功的对象
这时就已经完成了简单的数据交互测试,这时并没有数据传送,所以只能显示连接成功和它的对象,于是为了显示出完整的数据交互场景,在js代码中添加一个setInterval定时器,来进行模拟
每隔1秒就打印出时间的信息,可以看下控制台的输出
其实WebSocket的一个很实用的目的就是为了简化数据的发送请求,两者只要建立一次通讯,就可以一直保持连接,并且服务器可以主动的想客户端发送数据,大大简化了数据请求的操作。