使用WebSocket
- WebSocket 接受一个url参数，然后使用WebSocket对象的构造函数来建立与服务器之间的通信链接。
var websocket = new WebSocket('wss://echo.websoket.org');
注意：URL字符串必须以“ws”或“wss”(加密通信)开头。
- 建立通信后，可以使用websocket对象的
send方法对服务器发送数据，但是只能发送文本数据(但是我们可以使用JSON对象把任何js对象转换成文本数据后再进行发送)
websocket.send("data");
- 接受服务起传过来的数据，通过
onmessage事件来接受服务器传过来的数据：
websocket.onmessage = function(event) {
var data = event.data;
}
- 监听socket的打开事件，通过获取
onopen事件来监听socket的打开事件：
websocket.onopen = function(event) {
//开始通信时的处理
}
- 监听socket的关闭事件，通过获取
onclose事件来监听socket的关闭事件：
websocket.onclose = function(event) {
//通信结束时的处理
}
- 通过close方法来关闭socket：
websocket.close();
websocket.readyState
- 可以通过读取readyState的属性值来获取WebSocket对象的状态，readyState属性存在以下几种属性值。
CONNECTING(数值为0)，表示正在链接。
OPEN(数值为1)，表示已建立链接。
CLOSING(数值为2)，表示正在关闭链接。
CLOSED(数值为3)，表示已经关闭链接。
发送消息demo
var websocket = new WebSocket('wss://echo.websocket.org');
websocket.onopen = function(event) {
console.log('Connection open ...');
websocket.send('Hello WebSocket');
}
websocket.onmessage = function(event) {
console.log('Received Message: ' + event.data);
websocket.close();
}
websocket.onclose = function(event) {
console.log('Connection closed.');
}
再看一个demo，客户端使用websocket技术与服务端进行链接并且发送信息
<div id="message"></div>
<input type="text" id="text" placeholder="请输入要发送的文字" />
<button id="connect" onclick="connect()">建立连接</button>
<button id="send" onclick="send()">发送数据</button>
<button id="disconnect" onclick="disconnect()">断开连接</button>
var websocket;
function connect() {
var msg = document.getElementById('message'),
readyState = ['正在链接','已建立链接','正在关闭','已关闭链接'],
url = 'wss://echo.websocket.org';
try {
websocket = new WebSocket(url);
msg.innerHTML += '<p>Socket状态为:' + readyState[websocket.readyState] + '</p>';
websocket.onopen = (event) => {
msg.innerHTML += '<p>Socket状态为:' + readyState[websocket.readyState] + '</p>';
}
websocket.onmessage = (msg) => {
msg.innerHTML += '<p>接收到信息:' + msg.data + '</p>';
}
websocket.onclose = (event) => {
msg.innerHTML += '<p>Socket状态为:' +readyState[websocket.readyState] + '</p>';
}
} catch(e) {
msg.innerHTML += '<p>发生异常</p>';
}
}
function send() {
var text = document.getElementById('text').value,
msg = document.getElementById('message');
if(text == '') {
msg.innerHTML += '<p>请输入一些文字</p>';
return;
}
try {
websocket.send(text);
msg.innerHTML += '<p>发送数据' +text+ '<p>'
}catch(e) {
msg.innerHTMl += '<p>发送数据异常</p>'
}
document.getElementById('text').value = '';
}
function disconnect() {
websocket.close();
}
发送对象
- 使用websocket,不仅可以发送文本数据，而且可以使用JSON对象来发送js中的对象，使用JSON对象的关键是使用他的2个方法，JSON.parse方法与JSON.stringify方法，JSON.stringify方法把javascript对象转换成文本数据，JSON.parse方法将文本数据转换为Javascript对象：
var websocket = new WebSocket('wss://echo.websocket.org');
websocket.onopen = (event) => {
console.log('Connection open ...');
websocket.send(
JSON.stringify({'msg':'payload'})
);
}
websocket.onmessage = (msg) => {
console.log(JSON.parse(msg.data));
websocket.close();
}
websocket.onclose = () => {
console.log('Connection closed.');
}
发送与接受原始二进制数据
- 在HTML5中，除了可以使用websocket发送文本数据及对象之外，开可以使用websocket来发送Arraybuffer对象与Bolb对象：
var websocket = new WebSocket('wss://echo.websocket.com');
websocket.onopen = (event) => {
console.log('Connection open ...');
//发送二进制对象
var buffer = new ArrayBuffer(128);
websocket.send(buffer);
var intview = new Uint32Array(buffer);
websocket.send(intview);
var blob = new Blob([buffer]);
websocket.send(blob);
}
websocket.onmessage = (msg) => {
console.log(msg.data);
websocket.close();
}
websocket.onclose = (event) => {
console.log('Connection closed.')
}
- 比如上传图片，发送图片二进制数据：
<input id="file" type="file" name="" value="选择图片" accept="img/*" />
<button onclick="upload()">上传图片</button>
var websocket = new WebSocket('wss://echo.websocket.com');
function upload() {
var file = document.getElementById('file').files[0];
console.log(file);
websocket.send(file);
}
websocket.onmessage = () => {
console.log(e.data)
}
