浏览器使用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:// 前缀。 + M U" E: {8 H8 Y
" `. {( X% N2 L: M0 b
6 P! Z1 J# N4 M! b! m
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
1 q [% Q* G% A3 R% |: g
}
( r( ]! C$ J4 e; [1 G7 E7 |" ~) s
3 C3 F, z% }& ]0 r0 X( b
socket.onmessage = function(){
5 O+ H2 O' `8 }
//在event.data消息数据
" |' M8 U5 R" d; ~+ y
}" C0 w9 O0 D; C. b3 e }3 H
3 h q/ H" c" C; G& Y. D# J, @
socket.onclose = function(){8 }# P; u3 r. t# N
//关闭WebSocket! A" x# D6 u: ]/ N5 H9 k7 [6 C. b
}7 _* f6 M8 ]# W" C$ L
" P z6 M5 Q" k* S; {# U+ X7 \
socket.onerror = function(){
1 u; i h. ~& X0 o
//错误触发/ U0 K* ?) K3 m6 R* Z; F/ F8 ?
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
" ]& C+ p. V2 |; O* ?
<head>
6 t# R, Y x% ~. T
<meta charset="UTF-8">
' z2 v& Z ~2 J* p' q: ?
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
: R# e7 N/ T' u7 I
<title>WebSocket</title>
* H7 l9 h" E0 x. ~
</head>( \2 ]( O' z( T/ i; e" u
<body>
$ N! ~ t, o% C0 _
</body>! S% z" e& o" y* O3 a
<script>
1 r: y" u$ G2 W0 P
var socket;
% q' S5 p' k) A. v5 @# `/ }( T
if (window.WebSocket) {% y) z; D( j% C9 z
socket = new WebSocket("ws://localhost:8080/myapp");% \' R6 v9 ?8 o# H5 z* w
socket.onmessage = function(event) {
( ]: ]2 \, H! y1 W- f) m3 I
alert("Received data from websocket: " + event.data);; e* L9 ^. N; V6 v: H3 K" T2 o
}
% g) l& H5 M+ A5 ]
socket.onopen = function(event) {/ g! S. N* R- l3 M) I# f3 g
alert("Web Socket opened!");9 B% e* E- x6 l: o
};% g0 E% D5 r7 c
socket.onclose = function(event) {6 ^$ G0 S: Q3 o6 Q
alert("Web Socket closed.");% d$ \6 _1 t$ }& y% h
};
6 z3 W5 ~6 W; W+ |& u6 `1 i
} else {
1 r; ~4 t5 T! }$ K1 I5 g
alert("Your browser does not support Websockets. (Use Chrome)");* y* s6 k4 W1 d
}: ^4 {3 r: S6 B! k: C6 [; m
5 n" H8 C) {, U2 J. s" q
function send(message) {
7 [" I# \& r6 U" a+ \
if (!window.WebSocket) {
/ N! s7 T2 E. u# _
return;: c# }% x# G/ C9 W9 C
}7 u8 C, h2 q( T6 ^2 j# f
if (socket.readyState == WebSocket.OPEN) {8 a3 e" s1 h, D( g1 d1 _
socket.send(message);" {) e6 a$ o ^" _- O
} else {
; l! G* g7 A5 B* q" _
alert("The socket is not open.");
/ F ^+ I1 p- U+ L1 F
}
9 {6 r- Y. ?0 f2 }
}8 }( @" ]- S9 P
</script>& @' o: r% {( |2 d. Z
</html>

复制代码

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

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