其實對於前后台交互有很多種方法(只列舉我知道的,嘻嘻):
1:from 表單:
使用場景——小信息量提交給后台
2:ajax(跨域的話用jsonp):
可以進行多量的前后台信心傳遞;
但實時性不高,不適合要求實時性的場景;例如qq聊天
3:webscoket:
可以進行大量的前后台信息傳遞,
實時性也十分良好;主要應用場景為聊天場景;
一:websocket:
1:創建一個websocket實例:
var socket = new WebSocket(socketUrl); socketUrl代表的是請求的地址,類似於ajax的url
2:鏈接服務器進行前后台交互以及事件處理:
socket.onopen = function(event) {
//想要驗證是否連接成功可以給后台發一個消息
socket.send('我已經連接成功了么');
// 這個事件監聽,可以監聽后台返回來給你的消息,即str就是
socket.onmessage = function(str) {
console.log(str);
};
// 監聽Socket的關閉
socket.onclose = function(str) {
console.log(str);
};
// 關閉Socket.... (需要的時候把注釋去掉)
//socket.close() ;
};
其實websocket用起來特別的容易,但是有一個缺點就是ie不兼容,那怎么辦呢,還有一個辦法就是socket.io.js,它看起來非常像客戶端API,建立客戶端Socket.IO;
二:帶Socket.IO的WebSocket:
Socket.IO可以從GitHub下載,可以把socket.io.js文件包含到頁面中:
<script src="js/socket.io.js"></script>
此時,Socket.IO在此頁面上是有效的,是時候創建Socket了:
1://創建Socket.IO實例,建立連接
var socket = new io.Socke(bollmskn);//bollmskn代表的是請求地址,類似ajax的url
socket.connect();
2:// 連接監聽
socket.on('connect',function() {
console.log('服務器已連接!'); // 這里可以做一些事件的處理啊,什么的比如做一個提示啊什么的;
});
3://建立一個事件監聽,監聽后台返回來的數據
socket.on('message',function(data) {
console.log('這是后台返回來的消息',data);
});
4:// 通過Socket發送一條消息到服務器
function sendMessageToServer(message) {
socket.send(message);
}
5// 添加一個關閉連接的監聽器
socket.on('disconnect',function() {
console.log('鏈接已關閉!');
});
Socket.IO還提供了由本地WebSocket API提供的普通連接、斷開連接、消息事件。Socket還提供了封裝每個事件類型的方法。如果你們后台封裝了特定的事件方法就按照你們的自己來,這個你們前后台自己商量着來;
拜拜,周末愉快!!!
