浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-29 14:55:21

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

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

复制代码

8 ^# \/ M& P9 z+ S
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ) ]4 @9 q% E$ a+ |

2 m; H) z/ y. P* h" G, d& s
9 ?6 N0 e, l. K该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){0 b% X' b: o5 d0 E/ a# J/ d
# @; \; J' r/ Z: u: F
//打开& F& r( f/ V% K7 R3 m
; x+ ^9 i% d! `
}
* e' [& v+ Y- f
3 @; W; f) P1 M w$ ~" }1 a) M* G
& G0 c4 w3 a: `
socket.onmessage = function(){
) f- d$ _* D3 N1 I1 R( }) s! |
Q& Q& u% C8 Y; G
//在event.data消息数据
; b l4 P' D5 K) T7 u
* Q: U2 M" h9 L
}
/ {" }4 Y9 Z$ E9 t3 }9 Y
( V$ E$ g- }* @' \7 b( {! Q' S
socket.onclose = function(){
1 u% v% {3 c* ^- H0 w% b4 D! y
2 d6 Q3 Z" K1 D0 V2 [! V5 o
//关闭WebSocket
& b+ P# U9 f N# ^% W' N
: L& N; w* v: r- g
}
6 I9 W. [0 W: _- v( C8 j
0 k5 e7 t9 @: J9 ?# C K( F
socket.onerror = function(){5 `6 d: G+ |6 e" K+ _
' {6 U- F8 q" b. K
//错误触发2 H+ B& c1 x+ p: k3 F( O
- V/ O7 B9 w5 r; f$ `+ e$ v
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html> { v! S4 V+ ~! P# o! r2 d
<html>
+ p9 ?* P+ o3 g: w6 k: Z
; `' Y! X( |( ?, G
<head>
- h2 ^: i) N6 u6 u
<meta charset="UTF-8">& k6 F1 K, I% ]0 c* c- v% Y
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">- n, r: i& K5 l7 u5 C7 j% s
<title>WebSocket</title>
% G. U' A- D) `. p0 K
</head>
) Q6 s5 |* l1 z0 q5 M
1 O! v, t, b- Q R2 U% q
<body>6 R" Z5 z7 s: ?! t" K
</body>
- b& w5 X( h6 R" u# f1 N1 \( M
<script>
2 B' R5 @8 |# i: ~8 h8 S8 d9 @! D
var socket; p4 z, N7 |! q) v
if (window.WebSocket) {
8 w' t) K1 c7 N- `
socket = new WebSocket("ws://localhost:8080/myapp");7 A2 @/ R9 y" g# l5 ]
socket.onmessage = function(event) {
9 p. t3 r( L8 {
alert("Received data from websocket: " + event.data);
7 s, I: F: ?; x0 m5 b3 @& R5 y
}
9 l) J" B8 i- G( n
socket.onopen = function(event) {' K5 M" {% ]; L9 s& S
alert("Web Socket opened!");8 Z& } S! p1 {9 G8 D' t8 S
};
; `+ L+ B7 `. h9 m& N- {
socket.onclose = function(event) {
& n0 i$ @# V- v3 j
alert("Web Socket closed.");. N5 R( k5 j" K- S7 J
};* ^* x, C, q+ T2 b$ H; O
} else {
8 ^/ w" m' R3 V; k6 K/ P( U
alert("Your browser does not support Websockets. (Use Chrome)");
* ~ j& j c) Y5 W/ |, D q
}9 s% p: F; M' E9 D9 S8 G
; w0 k' K2 u" ?5 E, K- p
function send(message) {
; X! ]5 U- c2 k
if (!window.WebSocket) {/ U/ X: S0 }* J" C$ p
return;, O9 i( e: ^" q0 I1 O* U
} M4 e& i4 E$ B# K
if (socket.readyState == WebSocket.OPEN) {
/ @+ P9 z& Z& G2 R
socket.send(message);/ `3 o; R! u4 s; C% b# r
} else {! ~6 \+ ?1 z9 \& ~
alert("The socket is not open.");
* L: P+ g! O+ r3 U. f, ]9 v) n
}- f4 k+ d9 E! p1 I% U% q1 X
}
) I' m1 e& U6 |8 D$ f! B1 g
</script>
. M: }: y4 j! {' E' L! c. _
% L' E# A8 ~( `& M
</html>

复制代码

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

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