浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-23 19:36:00

如果你要有一个支持 WebSocket的服务器（Java、Php等），可以在浏览器中使用一个新的WebSocket服务协议，来打开一个链接：

var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");

复制代码

与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 8 i7 a1 {0 o. M: ]4 \* h: @; A
. _9 M9 N1 f3 }& W! M; [, l

( S. @( r8 c# ]0 B该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开4 o9 R; W* g$ n8 `: V2 E* t2 j: N
}0 Z3 j' u8 n$ E5 t* [
! O j+ o) h+ w
socket.onmessage = function(){
: B; e( t# w, I2 E
//在event.data消息数据! L5 g, m$ C* z. ?& l2 b% J# i7 x
}2 A' {4 K- r5 S6 Q- U/ i0 ^+ }2 E
1 d5 q1 ~+ o9 B& p8 s
socket.onclose = function(){5 G* ]7 t. I! J
//关闭WebSocket& t* Y t4 Y" H7 I
}
" V9 ^; l5 n" V! @1 K" F
" ^4 D& x7 Z, q; c- ~5 E& O
socket.onerror = function(){
5 Y- j8 n9 ^# V) g0 ~
//错误触发
6 K7 _( J9 A- X8 R# z. r
}

复制代码

通过套接口发送数据，调用socket.send:

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>) |3 |3 D0 E7 o, Z6 ]8 m
<head>9 x' j. K3 q2 t2 V g2 L& A
<meta charset="UTF-8">
7 q# k& q+ f1 u6 j+ d, o
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">+ q- o3 [3 `1 y: L6 A4 j# v! p, i
<title>WebSocket</title>
6 f/ X7 M& Q0 Q4 b( _
</head>( c) y& m8 F* d) ~' g
<body>- R* O2 P; f" \, {. v& r# R# F
</body>
2 B" [: S/ D5 f4 A) ~: s K- T
<script>
. ?$ M6 ?4 ~* ^
var socket;
2 X/ h! A H( o# w
if (window.WebSocket) {# m6 L9 P4 B- r& V% h1 U b
socket = new WebSocket("ws://localhost:8080/myapp");. ]7 @$ ?3 O8 g. m/ m
socket.onmessage = function(event) {
2 K9 [5 I1 w" ? O9 M
alert("Received data from websocket: " + event.data);
1 v; X- K0 y* D) ^( N) g# l6 o
}
2 p" y( G* _9 @6 i/ F3 b& \
socket.onopen = function(event) {3 {5 T; i/ z% I0 ` I+ S3 ^
alert("Web Socket opened!");
1 b) ?# c5 `6 i' m/ J6 C9 e
};
S$ z& Z1 y3 \- M0 H. v5 K
socket.onclose = function(event) {
! q6 h J: i0 G6 j6 C3 @
alert("Web Socket closed.");
* P4 ~4 ~9 {; C$ Q
};
. I2 ]8 F# z9 f: [7 J
} else {2 u% ]% o: E3 n" M3 A" ~( \
alert("Your browser does not support Websockets. (Use Chrome)");
. Q% E) n9 m$ e' E% `0 @/ P
}
1 O# y+ R6 Y* Q; S+ R8 O
I/ \- ?% s1 T, d
function send(message) {7 U& D0 V1 M1 u
if (!window.WebSocket) {
* j) S! t5 W; ]; O" @) @8 p6 ^
return;. U; S$ o+ `6 {/ v
}
4 O$ a" x6 u' c- F* J
if (socket.readyState == WebSocket.OPEN) {
* j3 [6 `/ f$ ~
socket.send(message);, d" c. u, P7 t' h
} else {
/ q$ e- N+ O0 x, z9 b( e
alert("The socket is not open.");, D4 S4 @& o Z8 t4 y8 `
}
% \3 y. Z: K1 _/ k; \* s) D
}
- p+ t; D- w2 h6 G
</script>
1 ^7 Y' v N2 S/ e6 X% z6 f
</html>

复制代码

帐号		自动登录	找回密码
密码			立即注册

[php学习资料] 浏览器使用WebSocket实时通讯

浏览过的版块