浏览器使用WebSocket实时通讯

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

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

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

复制代码

& E3 M! f/ [/ I与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 7 t# ^( \: w& _; w9 W5 Q

+ c: l- |5 O2 x6 Z) n9 L& E: r% n- @: l* T- F5 Y
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
% ]8 i/ a% u9 s$ T3 ^
9 F" Z+ V7 r- v' I+ v
//打开& t( g3 v1 V. N+ a
; W% ]+ b9 ?) B/ a- F! N6 n
}
) F' q6 s5 x# z6 p
- |5 x. q2 x. C/ z' V
: u$ H5 s. F! Z5 v' \
socket.onmessage = function(){6 t: L# X9 ?8 ^/ t4 k) H
5 p8 q; R% p& G" w9 n4 d
//在event.data消息数据' E. p' Q4 a5 F" I3 k
7 ^ V1 K9 l) r# B
}3 S5 J9 z3 p- R
+ j9 k9 i) D Y5 z+ i
socket.onclose = function(){: n0 Q1 k' v, r# G: D: }: `
4 o0 ]* c, [9 E4 Z; @$ P
//关闭WebSocket3 e3 G9 N- e0 J7 y5 m
q3 t6 z& g" B( i5 ~( Z8 M
}% {- G& ^) K3 z( i, P" F
. c2 T ^# b* b8 L* F' k
socket.onerror = function(){
3 d0 z6 i! l- a8 Z/ t; s
$ |+ [+ ^; z- {7 y
//错误触发
1 y8 D/ G3 j8 K0 D& }
) y) u' J; I' C% t" i( R8 ]
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
/ G& _$ l& o O+ l" r9 G
<html>/ B; e# Q% e, l9 }+ h Q' {
! E# L) _+ T1 T
<head>
7 P' ~" F( E. b4 c9 t
<meta charset="UTF-8">
3 {# i* n: M4 @! u/ D
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">% f4 |. B. Y0 K# ]+ x* O5 `0 a% d
<title>WebSocket</title>; e' s7 D; Y% l' f
</head>5 ]( S$ W4 p! H6 U" w: N) _# `
2 O& Y( Q, ]( V0 L8 w
<body>! I9 Z; a7 f* s. N! ?
</body>
3 W+ `% i, x) m& m! N* ~, p
<script>
6 o/ Z: W) \1 B
var socket;
8 ^) M5 x# b: @$ b
if (window.WebSocket) {$ m* w) F$ U4 R
socket = new WebSocket("ws://localhost:8080/myapp");
8 _. [9 K+ D. R* l, [* W4 A4 d2 j; m; y
socket.onmessage = function(event) {) ~3 U0 `( w' f& O E$ U. j8 L* P
alert("Received data from websocket: " + event.data);
3 h% [* \( C; ~ w( ]2 O7 ?; q
}
- V2 b3 O8 |9 O4 D
socket.onopen = function(event) {
6 {: Q A$ }2 @( _; U
alert("Web Socket opened!");
& L+ o+ z% R8 P$ M) O
};
& C1 v, E3 ` N3 I) ~4 [9 ^
socket.onclose = function(event) {
$ }0 k% y' [7 U& M L2 J
alert("Web Socket closed.");
+ X( J8 r' |" V% }1 P/ o
};7 b+ d) |/ p% J( N
} else {
: X# h7 z& B$ O9 P0 C1 ]2 @
alert("Your browser does not support Websockets. (Use Chrome)");8 g7 F% V/ n; m4 T& I+ w% ^. h* _
}
9 {0 u9 G1 c2 j- o
! g( a( u6 ?4 \ t. g( Q
function send(message) {
1 s+ W9 R* j- g( J' J. e$ {
if (!window.WebSocket) {
8 L4 T# E9 K" W$ |5 m
return;. _, P3 i# I2 n2 m
}
! m; t- `8 e' O! I1 C1 r
if (socket.readyState == WebSocket.OPEN) {
1 Y9 m9 o- y+ |
socket.send(message);4 @9 e4 l; {5 f- o
} else {
- ?$ a( t( i( w7 k) `0 j$ j. ^( U
alert("The socket is not open.");
/ r0 Y! E# @/ t4 A
}
$ p6 }2 u: z) y- S: I
}8 g9 M, K) S X$ B
</script>, p1 E6 S8 J0 d6 B- x; g
. {/ [. w$ [5 s( @; C
</html>

复制代码

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

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

浏览过的版块