浏览器使用WebSocket实时通讯

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

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

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

复制代码

' v2 {5 S) ~* D2 a: z' T与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
: ~( P5 i) q+ d. s4 T5 p8 b' Q+ p5 u( \: ]) W8 `4 ~. [- Z

6 M# ~. }& v! k该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
1 D5 q- Z' V' |5 v7 j& ~+ E
: m' E1 X( u" Q3 A) n% s
//打开
( q1 B1 X4 Y2 o; H) p
* B) b' E5 A1 D. M0 f% x
}
! _8 G* @# r7 d E$ Q8 \2 O9 F# z& a
4 H* q* Q0 D1 g& M5 T9 ]+ U2 J
) v3 [ G- T. ]: s
socket.onmessage = function(){
* i, F0 l8 f3 @6 ]8 O% H& `9 S6 H
. Y# k" b% t! [ U/ ]$ K( K
//在event.data消息数据9 f1 ~* s j; M* g6 f3 \
' }9 c& l7 h! Y: C- m; g5 j
}
2 D( q* N% d/ a! C
% o0 h7 H7 `* ?) |5 Y8 p# K- A
socket.onclose = function(){; ~+ d$ C% [( H" w8 u) a& |$ j9 {
6 n- U4 Q9 @5 K, J8 R* y
//关闭WebSocket
+ z0 [0 p/ M- s) C' w
2 i, t# T n' T3 a; I
}
$ X+ F3 _; i, a9 }
6 C6 j: Y6 O! T" v, q/ U
socket.onerror = function(){( m' }+ M4 z6 W9 ]8 g0 I/ t
: u8 h2 q' z+ a6 e$ e& D
//错误触发
2 l) T7 _, D$ d
7 a" Q7 Y, u8 N' m
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
; p+ _. B4 M" V; c e
<html>+ |- W- b6 K# I" [+ T4 D5 r% ?* M3 d
3 D# [& E( i' n/ x
<head> I! j! ?0 O& h7 A8 Y, e/ I4 S
<meta charset="UTF-8">
" D4 C. N* q1 u+ ]) |& ^
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
8 w7 H/ E) u$ L( o* p8 S" b
<title>WebSocket</title>& g) c1 @, I8 N7 n! V. [' c/ g
</head>- }) f( a" Z+ W4 N
4 n' i& ^8 M5 y* K* r" y
<body>
: J6 M- {: k4 H
</body>
8 S* S+ U% b, }$ F7 r6 x4 ]
<script>, \5 [5 U/ t0 c3 y
var socket;/ g% v! D& ?4 U) i4 B- v
if (window.WebSocket) {
- J, `" p% k: W9 j8 a
socket = new WebSocket("ws://localhost:8080/myapp");
" Y h4 j0 ?2 v. R5 t
socket.onmessage = function(event) {
2 G3 n! A5 j" V4 E0 N
alert("Received data from websocket: " + event.data);/ w! s: A9 a$ `# S" V
}: x: L6 S0 ?8 i) N! ^3 {; Q6 ?
socket.onopen = function(event) {4 s p0 j2 K+ _, s
alert("Web Socket opened!");; o) g: X+ Y8 w: M6 M9 O$ A
};
1 B' c4 P ^% p1 J, T! r
socket.onclose = function(event) {6 U8 J" M+ r0 Y, p6 k
alert("Web Socket closed.");
: Q2 Y3 X$ D' t
};: b% @9 X" l. R: g+ u9 b# W
} else {/ e/ _; z; x3 ~3 z8 P z- ]
alert("Your browser does not support Websockets. (Use Chrome)");6 r- K8 D) J$ n O3 s: N! O
}0 W* e' @; c& u
8 q3 E7 A$ ^$ ]7 ]
function send(message) {: ?/ l5 T+ |* `$ D' u" v
if (!window.WebSocket) {7 }; X$ o4 E: S3 k" {" ~
return;% o5 U, n: q i# [
}
; J Y/ X9 t& J b: ^3 y
if (socket.readyState == WebSocket.OPEN) {! F6 R. I6 u0 [. M0 e) @; ]& L
socket.send(message);
# l" |. x0 G& M) H1 o) t
} else {1 h% ~7 e! K$ B! z7 m
alert("The socket is not open.");
( N. \: N9 r4 C( L1 n
}! e2 i7 E. }8 Z" P5 ?
}# e1 Y* ^" r {. K- x \* E
</script>
) W# v- _7 s! m, }+ t/ [4 p. P
9 Y ^5 m1 O2 f" x9 Y& l* m
</html>

复制代码

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

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

浏览过的版块