浏览器使用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:// 前缀。
. g( ?3 B9 L9 j. W& l; J$ c6 Q/ `

8 X. F/ h4 k3 T/ ~! |$ R. H该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
J2 W# E) B( Z
}
+ s; F" s4 Y4 ]0 V2 _% H* R, U
5 @) J, \& e/ k. t
socket.onmessage = function(){
4 q% s$ p! z; M& p" @
//在event.data消息数据
0 z1 D6 L* b/ D# H3 e' r
}
! i. ~" ~4 ~/ C
' N f5 ]: `. f+ }. |+ x2 a
socket.onclose = function(){$ d+ i0 W. R6 i8 K+ {" ^
//关闭WebSocket
1 O3 a1 s: l" G! t3 E
}* a8 j" b2 \7 Q9 m5 d/ C3 C
8 x& O& q4 t. S, \& e6 R
socket.onerror = function(){
* \* M9 V* z! u1 i$ y; m
//错误触发+ ^" Y" z, d% \5 `7 O
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>$ b+ a7 H( R+ ^# E0 S
<head>! U# z% S& L" V( M) {
<meta charset="UTF-8"># a" t- [1 B( F' F
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
- P6 X1 H$ O v
<title>WebSocket</title>
) s$ L, @9 G8 R' ]$ Z
</head>, J$ Y% Y5 N. ]( W/ a' N
<body>. G( {1 }7 C' h! h ]
</body>
6 E g, ^! Q' o/ F
<script>2 f- W3 k6 z% z6 G8 A4 y( Z3 { s
var socket;% u$ {; S X( B! J2 m
if (window.WebSocket) {
6 N) p! B: ^! D7 \7 u; S/ X) m
socket = new WebSocket("ws://localhost:8080/myapp");) v8 {1 W: M: s
socket.onmessage = function(event) {
: v5 c8 J5 [+ u ^+ ?" s/ ?
alert("Received data from websocket: " + event.data);* T1 A0 K6 L, @1 L- Q/ h: N
}
" [8 T# O& u9 J! A( o6 h8 Y
socket.onopen = function(event) {; l. S2 `2 ~$ C+ K: O) Z0 O4 z
alert("Web Socket opened!");
" O) H. B. }1 q" ?
};/ }) `9 Q. @* L; O: u
socket.onclose = function(event) {0 \( F2 X& x2 o' y
alert("Web Socket closed.");# G* [5 y: O" A! d n1 [
};
, R f% a0 R+ Z' I8 h3 y
} else {
+ |5 I! V5 F5 A
alert("Your browser does not support Websockets. (Use Chrome)");
4 q) b; w: P# {2 ~( `) q( m
}
5 d/ F, y; b9 k4 ?% g* ], ?
/ a7 N8 r) i) U7 a, n
function send(message) {
1 V/ i) B4 j1 w! A- J
if (!window.WebSocket) {: J4 ^& O5 Z% e( L3 z! Y' f$ Y
return;3 D, H& l. v+ `! ~8 _" o
}! s) `6 j k+ o) X5 u8 C* k) H$ O
if (socket.readyState == WebSocket.OPEN) {- q$ O6 s; U( g
socket.send(message);
5 g0 r" N* S, X* g( A
} else {
$ s8 I. G' q3 `. c- X
alert("The socket is not open.");
, W6 W7 F* h" o. k- u$ I) t8 H/ P
}3 A! Z: Y+ O% P, d- [4 ?# v9 o
}9 P2 @1 C, |" l3 v. a' h
</script>
6 Z9 g% ?& E- L6 _
</html>

复制代码

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

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

浏览过的版块