浏览器使用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:// 前缀。 5 i2 h' _& b! j7 L- Q: Y% x; K6 E
* d; z6 O6 I* `0 Q
6 E, p6 |6 W& I& S/ _! [+ o, C7 y
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开% x+ V5 p& W/ U* p1 t9 m1 M
}
) B* o1 Z8 G- |* f X
; q4 N* r5 n2 V, I; m6 e# ?
socket.onmessage = function(){ |1 r X$ g" _$ ?
//在event.data消息数据7 F1 \6 j& W7 [' f! E
}+ p) o ^- t; A, L% ~
+ L% v+ _) U9 }5 z/ [
socket.onclose = function(){
+ \. L1 T: [: v. |8 }2 s
//关闭WebSocket
0 g, a* T" b; B( T1 u0 X/ C
}
8 k( z# [$ O6 a, x
, C0 R0 w' E: t0 Z4 e; W4 C
socket.onerror = function(){
5 X1 S* C* _" p: e, X; l8 e
//错误触发. D" M: S+ {( z! ?" R/ S) n: E
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>5 c* ?& H- O# V8 |' i. ]6 I5 a
<head>$ K/ x5 e* o- _( Z. K
<meta charset="UTF-8">
1 z" x# ~4 e, {8 U5 G1 ?( f5 f
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">8 D; I& n5 D6 l7 j8 g" m
<title>WebSocket</title>/ F: A+ Y+ Y7 Z* f' b
</head>5 P6 }1 C5 k0 F! X$ W
<body>
$ y c6 d. `2 a1 T: y
</body>5 A1 i+ k1 B# d
<script>8 r. ]; C6 i$ V# i% B. o
var socket;0 g1 H: Y8 X0 G% i
if (window.WebSocket) {
; k' m* X. N2 w. ~# m
socket = new WebSocket("ws://localhost:8080/myapp");
' J8 o# y4 J* `$ r* y
socket.onmessage = function(event) {
" |- ?5 v @' y& I9 W) k: i
alert("Received data from websocket: " + event.data);
: u. b1 J' N* ?+ C3 H& R5 P
}( @/ d8 _3 L( q/ f5 Y5 x
socket.onopen = function(event) {
U& T4 m4 _& ]3 d) l2 W- O6 Y* l
alert("Web Socket opened!");
9 O/ _# P7 O; X8 N
};+ T& y- o, H1 ~& H' |! |; }) R
socket.onclose = function(event) {: B. }. v: n# G4 G+ k; x1 ` r
alert("Web Socket closed.");
' g! R& m% G! }6 Z
};' R. m' t* @! C# M$ M7 p! o |$ X9 o
} else {
; d. n: M+ t# Q t8 @8 y. X
alert("Your browser does not support Websockets. (Use Chrome)");
- l2 [& q" ]; }, M: `
}' N) K( r1 H4 n4 v, R
4 p% Y4 l7 A4 C. V# D% P
function send(message) {1 j/ z4 j, s+ u& v+ w3 W1 b
if (!window.WebSocket) {4 |: L0 U7 o9 j. g2 R
return;. S- O: _& _5 F9 l0 F3 E
}
! ^5 p( k. X' g- u3 g
if (socket.readyState == WebSocket.OPEN) {1 h( Y1 c) D% z& }) T+ Q
socket.send(message);; w# O; m i, X3 ~9 v6 m/ R% W2 [: F
} else {: I- _% ]" b0 U$ ?9 S
alert("The socket is not open.");& \8 w6 b9 T( B
}0 e; T9 }$ K/ T: n4 Z# ]
}+ W4 X1 a( J `& N1 A# r
</script>
4 T* l1 Z; i7 B& ? @7 I
</html>

复制代码

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

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