浏览器使用WebSocket实时通讯

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

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

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

复制代码

& B2 l3 a+ V1 W$ A5 N+ H
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 - L: r; m* |* L) @: Z1 P+ z/ k

# ]- T9 w; ^. j, F4 Y1 n
! c3 }$ u1 }$ @该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
5 t5 i. ]7 [( P2 |: @
/ ~5 D0 {) N& x/ h# t' e
//打开* p, k+ R2 F" H1 u2 e- k
8 n, P9 }4 d4 Y1 B) ^/ t
}
! e, x8 v, ]/ Y/ C" v
7 q! e& |5 {3 e( u2 B6 r) }. h
- ~$ \ x5 X3 u, S1 K3 Z4 Y
socket.onmessage = function(){
; ]- i+ M# G, K1 Z
9 A ]7 y$ O c
//在event.data消息数据
' Q4 l1 d* P: k
$ @& F6 P2 c7 j+ C0 Z3 |
}6 o( S( _4 b6 N- Z! q
, J! K# [1 z$ E* B& @" D9 a9 |
socket.onclose = function(){, t' B2 c* u2 |4 x" b
4 T- i* Y3 K! V1 e% Z; y, ^/ Y" Q u
//关闭WebSocket3 o. M! b* t! u/ j! `
8 k) X( ?! d3 M: q5 O
}
* P5 j5 {/ w0 ~9 x' \; O$ S
3 j! D6 }+ R/ }# X5 s. q: ?/ D
socket.onerror = function(){$ x4 }& |: \6 f {# h& @/ x
7 F) G9 ?' G- F
//错误触发* a$ i. V* D A: l! y0 b* t
8 S" `! }* b$ T P2 x3 `; Z; K
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
/ n! x8 ^0 \6 L: b; [8 T1 p
<html>. Q& H* E0 U3 Y5 x& |: ~% Z
% Q/ ]5 w' k. v4 t8 t
<head>
/ y* }5 f4 v" K+ c
<meta charset="UTF-8">$ q' K5 U/ u N" X$ {
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
! [7 Z8 U9 `' H
<title>WebSocket</title>
; P% }1 W$ d5 ~ U
</head>/ L: q& ?" R# q. F8 A3 f/ ^
6 G; ~0 r4 f7 j
<body>
: O, l4 T+ D# Q2 E- @( N5 O7 k$ B
</body>
6 K1 ~) Y' L/ i6 o$ [# F; s) a
<script>$ N# e$ w9 @, [
var socket;, Y2 @! i j4 R: u2 x. {
if (window.WebSocket) {! G, G. @7 o/ ^7 R& [
socket = new WebSocket("ws://localhost:8080/myapp");
9 P8 P! u/ X9 W, T: ]* P# E' c y
socket.onmessage = function(event) {, f0 ^0 c4 B/ L2 e
alert("Received data from websocket: " + event.data);
7 ~: R1 R) Z, p* Q& G% k
}
; \+ i1 @) j- _; v4 k, A) c( |+ `
socket.onopen = function(event) {
+ i$ m5 Y2 p8 R8 C
alert("Web Socket opened!");; [& h/ ~' o! y I& ^" D
};
( i3 ^5 E, L( O1 u
socket.onclose = function(event) {) N/ @; R3 l9 k, j) e5 {+ E
alert("Web Socket closed.");
0 D( L3 F9 Z, a* r& t1 \ y: [# t
};, n: B' l/ C% e) j9 t4 F3 E
} else {* w& X3 L& X" S" ~9 ^& O
alert("Your browser does not support Websockets. (Use Chrome)");4 _4 s5 T& H$ K! G' C3 E
}* `9 Y* y: L" g+ a9 W: I* v
- a$ l2 `6 A5 ^9 W
function send(message) {
/ j. r* k0 n9 E( H9 |4 }' b
if (!window.WebSocket) {# t4 h) z, k6 Y6 m$ u/ E# ^
return; i( g5 S0 {% Z
}$ K' c" ?& y& e: ~" n7 Z! M3 I, o
if (socket.readyState == WebSocket.OPEN) {% j) C$ N, I/ c7 O) L
socket.send(message);8 }1 c. U* }+ x: I6 R9 i
} else {
9 w0 G+ r7 U& J) X3 u
alert("The socket is not open.");. }7 u* F5 j" N; L' [. M
}+ K# c: z+ T( K+ O F! Q5 z
}
! e. u% M" Y- w* k m4 k
</script>& _1 d6 h* |0 R, A' v$ C% l7 E. ~
3 A- v" |) ~( ?6 r: O
</html>

复制代码

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

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