WebSocket对象提供了一组API,用于创建和管理WebSocket连接,以及通过连接发送和接收数据
创建WebSocket对象
var ws = new WebSocket(url,[protocols]);
url:表示要连接的URL,这个URL应该为响应WebSocket的地址
protocols:可以是一个单个的协议名字字符串或者包含多个协议名字字符串的数组
方法:
close([code][,reason])//关闭WebSocket连接或者停止正在进行的连接请求
code:一个数值表示关闭连接的状态号,表示连接被关闭的原因
reason:一个可读的字符串,表示连接被关闭的原因
send(data)通过WebSocket连接向服务器发送数据
data:发送的数据
属性:
onclose:用于监听连接关闭事件监听器
onerror:当错误发生时用于监听error事件的事件监听器
onmessage:触发消息事件的监听器
onopen:一个用于连接打开事件的事件监听器
readyState:连接的当前状态:0:连接还没开启 1:连接已经开启并且准备好进行通信
2.连接正在关闭的过程中 3.连接已经关闭
需要用到的npm包:
npm install websocket
app.js
//创建后台服务器
var WebSocketServer = require('websocket').server;
var http = require('http');
var server = http.createServer();
//创建WebSocket服务器
wsServer = new WebSocketServer({
//选择刚刚创建的http后台服务器为WebSocket服务器
httpServer:server
})
//WebSocket服务器建立请求连接
wsServer.on('request',function(request){
//当前的连接
var connection = request.accept(null,request.origin);
connection.sendUTF('服务器发来消息说已经建立连接');
//监听有信息来的时候
connection.on('message',function(message){
if(message.type === 'utf8'){
connection.sendUTF(message.utf8Data);
}
else if(message.type === 'binary'){
connection.sendBytes(message.binaryData);
}
});
//监听关闭
connection.on('close',function(reasonCode,description){
console.log('连接关闭')
})
})
server.listen(3000,funtion(){
console.log('服务器开启成功,请打开localhost:3000');
})
app.html
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);
}
使用node app.js执行后,打开app.html,连接已经建立成功
多个终端通过WebSocket实现通信
var WebSocketServer = require('websocket').server;
var http = require('http');
var server = http.createServer();
wsServer = new WebSocketServer({
//选择刚刚创建的http后台服务器为WebSocket服务器
httpServer:server
})
//储存所有终端的连接
var c = [];
wsServer.on('request',function(request){
//当前的连接,request.origin为请求的信息
var connection = request.accept(null,request.origin);
connection.sendUTF('服务器发来消息说已经建立连接');
//把连接储存起来
c.push(connection);
//监听有信息来的时候
connection.on('message',function(message){
if(message.type === 'utf8'){
//给每一个连接都发送数据
c.forEach(function(item){
item.sendUTF(message.utf8Data);
})
}
else if(message.type === 'binary'){
c.forEach(function(item){
item.sendBytes(message.binaryData);
})
}
});
//监听关闭
connection.on('close',function(reasonCode,description){
//某个连接删除的时候,删除数组c中储存的对应连接
//获取当前索引
var index = c.indexOf(connection);
//删除
c.splice(index,1);
console.log('连接关闭')
})
})
server.listen(3000);
使用express和socket.io优化WebSocket代码
npm install express
npm install socket.io
var express = require('express');
var app = express();
app.all("*",function(req,res,next){
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin","*");
//允许的header类型
res.header("Access-Control-Allow-Headers","Origin,X-Requested-With,Accept,Content-type");
res.header("Access-Control-Allow-Credentials",true);
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("Content-Type","application/json;charset=utf-8")
if (req.method.toLowerCase() == 'options')
res.sendStatus(200); //让options尝试请求快速结束
else
next();
});
//使用app作为中间件开启WebSocket服务器,express框架的其他功能也都能使用
//必须用server监听端口,不会报错
var server = require('http').createServer(app);
var io = require('socket.io')(server,{ cors: true });
//socket服务器监听连接,表示已经建立连接
io.on('connection',function(socket){
//向当前请求连接的客户端发送一个消息
//socket.emit('request',/**/);
//向所有客户端发送消息
//io.emit('msg',/**/);
//监听客户端发来的消息
socket.on('send',function(data){
console.log('客户端发来'+data);
//将客户端发来的消息推送给全部的客户端
io.emit('msg',data);
})
})
server.listen(3000);
服务端或者客户端的emit(‘msg’,data);为另一个端监听的事件:
例如:后端将客户端发来的消息推送给全部的客户端
io.emit(‘msg’,data);
前端就需要监听msg事件,反之亦然
前台页面
socket.io下载地址:https://github.com/socketio/socket.io
<script src='socket.io.js'></script>
var socket = io('ws://localhost:3000')
//监听客户端事件推送
socket.on('connect',function(){
console.log('连接成功');
socket.emit('send',username);
});
//监听msg数据对象
socket.on('msg',function(data){
console.log(data);
});
//
socket.on('disconnect',function(){
console.log('断开连接');
})