浏览器使用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:// 前缀。
& }& p- r# U6 ?7 @' [, H/ h: b9 d
+ J( q: h, ]; q e2 R
& | J o! p4 L- @7 l2 J' s该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
$ A8 u" A, ~& \, M
}
9 p+ ~8 ?2 U$ _
1 a& _' ]) V: ]
socket.onmessage = function(){. s0 Y8 y% K/ k% ^7 W* K% }0 _
//在event.data消息数据
$ V: K' R3 `' |- I: Y' h
}/ {% {$ L, }( S. [/ Q: z' C4 m
+ x5 R- ?* a5 d; \: b0 U3 i
socket.onclose = function(){
, X+ B5 U! K" y, |# F
//关闭WebSocket* L& W! y3 a8 x `1 E
}% V. n6 ^4 y) x9 I9 r8 l! B D2 M: W
|+ Y% s9 g5 h1 I
socket.onerror = function(){
8 i, d' S" b/ }% F3 i$ r8 y7 G
//错误触发
7 ?9 ]! C+ `2 g# l4 Y
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>( `/ D0 M$ l/ C) F% P/ M! R
<head>' b' Q9 r0 Y, r! N8 Z
<meta charset="UTF-8">' i- c( H. g3 g9 B* C. e% j2 v
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
8 I- M" l+ o4 t3 _# `0 l
<title>WebSocket</title>
1 X/ z; _0 S; g' K9 G- i5 n# H+ C
</head>- q2 k* A! ^6 ]& W3 v& m6 [, ]/ s( L
<body>6 C* J+ z" { b8 o3 ]
</body>% s* @$ N( { L$ a9 D: ]7 A" }
<script>1 y3 G. R. Z9 B1 O H: a2 E
var socket;* @" h) t) C: d! a7 M
if (window.WebSocket) {
. ~" y! u/ Q" X: ]% a1 W4 X' u
socket = new WebSocket("ws://localhost:8080/myapp");8 A% w8 p! } Q$ A2 f: T: T
socket.onmessage = function(event) {
0 p1 U- d6 j0 x8 i; \0 S) D
alert("Received data from websocket: " + event.data);
7 M( T, F {. A+ |
}. j9 v1 I- d, @, {+ \, I( \
socket.onopen = function(event) {5 f9 ?+ v3 T% U
alert("Web Socket opened!");
2 f$ c* Q+ }' v- _+ l1 k) H
};
9 Z! n; V7 S8 B
socket.onclose = function(event) {7 \0 b1 v$ n: k4 A v. o
alert("Web Socket closed.");8 p/ H4 c, B% m
};
$ k/ m. j$ _) w0 I% o$ z7 a$ C2 k
} else {
8 U9 p R1 Y7 m- g6 j3 Q; }
alert("Your browser does not support Websockets. (Use Chrome)");
p+ ?2 A0 ]- P; h( B, d; |
}
5 W9 y7 ]& w! ~( c
9 y, ^2 @# ~, l/ F5 n7 Q0 E5 w1 o
function send(message) {3 w- h" E, V! S& F3 {
if (!window.WebSocket) {1 V; r- u6 q# Q
return;
' M& E4 k/ d7 b e- r- L. z( R
}3 Q+ f( E/ E, x* g" p/ C& U
if (socket.readyState == WebSocket.OPEN) {7 X3 o7 A" k5 P
socket.send(message);
+ q) m& S8 i' K
} else {
. A n' c2 R* _
alert("The socket is not open.");
a- _/ U2 @( X Q! O+ w( @* l: c
}
5 M, K* W3 L6 O* F2 [
}4 W3 e1 u) t' U F* C) o4 @% K9 ]8 w
</script>8 @" V( R; X2 @+ [: v9 l
</html>

复制代码

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

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