浏览器使用WebSocket实时通讯

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

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

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

复制代码

1 i1 _+ E; R3 |3 ]$ h8 B与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 & d6 D$ s+ f- F
/ @3 u2 Q+ N/ J6 W. E- n8 i: q+ \

' \4 J* d$ m8 ~; F+ E1 Y9 `该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
) ]; T+ o( g2 I( F- x* \5 O
) F+ ~/ Y9 F6 T: D% x
//打开7 S1 l5 A4 O+ J- n/ J1 [
; }9 m! e% P" v' T
}+ x' Z# j* S: `: o9 H U# K
6 p6 j% p- ]) Y/ M" V
/ \* Y. o- v- X/ |1 u, |
socket.onmessage = function(){
1 a, U- z7 Z! n7 l
J, i( f' z( X( O% g% g
//在event.data消息数据
$ f/ c9 y& S! |, K
+ _' Y+ y" r; [' e' N3 @/ m* j6 c$ ?& X
}
- r2 @5 w/ l0 o' S& n
+ m( }0 b! w. B4 h* q
socket.onclose = function(){
* Q' p5 z2 v9 Q- F! q
/ Q1 M' r' N0 Q$ r, W( d
//关闭WebSocket+ @) Y6 Q) i& V: c9 l" Q3 n/ O6 T
. p5 A9 G/ Z( D' I" H1 N
}
( Y3 I6 E: h; i1 j; b6 ~
- T- E7 x* }1 _% o! _
socket.onerror = function(){
: ]7 o* {, z [4 T, s( R6 X: q
% _+ V' O; k3 M& N# n2 g
//错误触发
4 q$ L8 c, H$ f
) J5 i! [! y- Z L2 ^6 Q9 p7 H+ ]
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
6 K& ]5 H. B% o/ O# M' U% q
<html>
. ?3 E$ _( n- f. a
- t6 K& u* F+ n
<head>* {! q* J$ v+ j3 k1 \( M
<meta charset="UTF-8">) w. o) }' k5 y2 J6 d
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
4 i+ T/ l: p" q6 g6 N! {
<title>WebSocket</title>7 c( q2 F; ~: O5 s$ I, n
</head>
: Y: s$ t8 {# j0 C3 X3 j
$ W6 Y, V' ~, {% H2 ~
<body> [% n- x. Z C2 l; R4 z. O* s
</body>
1 s" W A6 [3 Z( z% R( J' g: [0 b
<script># M+ E0 j" v* F- I7 y# o
var socket;. R* X& O9 b; H t
if (window.WebSocket) {" a* f4 | E: B& a! I! q
socket = new WebSocket("ws://localhost:8080/myapp"); C! s* K& |2 ]9 R
socket.onmessage = function(event) {
6 o5 t! f. N2 i) o' v5 a c
alert("Received data from websocket: " + event.data);1 J" q5 j1 L9 R6 ?1 e6 o
}) ]9 J- c" p/ I. Y3 U- N3 R& X
socket.onopen = function(event) {
7 d" K- a" Y' l% {
alert("Web Socket opened!");* {5 e' D0 `7 q
};& x# Y% ?9 ?" Z3 c5 |$ e& g2 D
socket.onclose = function(event) {
! W% c, T+ C0 u$ g* ~: E
alert("Web Socket closed.");+ h/ V$ X. F7 \. `$ E
};
6 S# F8 [+ h' ?5 v2 z
} else {
4 Z+ d- B, n* J! k a/ F
alert("Your browser does not support Websockets. (Use Chrome)");
; s( e1 F* G0 H9 e& S/ t
}- ]) l1 H F* x0 m: z
6 u9 _- Q/ v9 r) v* E' h7 D! S9 M
function send(message) {
2 b. o# h& u# o) }% S- R+ T2 Y
if (!window.WebSocket) {7 [9 i3 }9 f ~
return;& b' U4 o# V! j- E/ p8 w" A, ^9 U+ ^
}+ Y Y, n; p6 h
if (socket.readyState == WebSocket.OPEN) {. i( c# d1 O- d) y0 k* Z5 e' a* {
socket.send(message);
& |; J* t4 ^3 \
} else {- R. c. O+ C/ v K, s
alert("The socket is not open.");
8 E) L! D2 ?; e8 ^
}$ o1 Y+ Z% X- z, P6 Z5 E
}; N; R* d9 |: f* g5 i, e
</script>
6 W- k4 l0 V" t2 J8 t- B
6 w, K7 A' C6 y/ C0 b) r: O/ Y. I
</html>

复制代码

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

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

浏览过的版块