浏览器使用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:// 前缀。
! g0 B9 v. w+ M. Z- ~- Z. {; r/ y* Y/ T q. @% o
! e! f+ P7 P, d+ |: k
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
: a$ b% d& I- ~, i% s
}: l& I$ ]9 H/ T
; ~9 S! a2 g6 m: J! ~+ x4 q! `
socket.onmessage = function(){9 m9 }& H d, K/ \7 o
//在event.data消息数据
) r6 `$ Z3 x0 B/ J1 D3 k4 t9 h9 z
}& L- T2 u+ H8 y& [' O8 j/ m
k9 \; _ \' C, b$ }
socket.onclose = function(){
" _9 x' I; x' s2 f
//关闭WebSocket
/ e3 S9 X+ ~: X- S4 P) K$ _) s
}
& X" G4 m- O4 r s/ z
! v' Z" A6 Q5 V9 Z) m
socket.onerror = function(){
3 t2 C. A7 n- w) j/ a! J
//错误触发# K+ \9 O$ n; B0 t1 o& c
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>. G0 v9 u E. m. }+ D+ J: K8 A, x7 A
<head>; P6 y' v2 S- c/ L' a
<meta charset="UTF-8">
1 C5 j' M% U. y% t6 l4 l- F' I ^
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">% c' c. v0 R# c; @
<title>WebSocket</title>2 C- y% |0 _( h( |8 V9 Q2 `5 ^* ^
</head>9 T/ [( s# L+ Y
<body>
0 t5 T+ m! x. C% s
</body>
0 \& l8 P$ ^' x+ \) p6 w0 V
<script>
. d2 P/ l! [* B/ v, i
var socket;
7 W2 j( |2 y' r, b& Z8 ^2 G
if (window.WebSocket) {8 B" l2 h, r6 C2 m2 F6 R) }( z
socket = new WebSocket("ws://localhost:8080/myapp");
1 Y6 e. P, L, \+ q9 c
socket.onmessage = function(event) {% k ^# ~; J$ L3 P/ \( \6 I
alert("Received data from websocket: " + event.data);
0 q2 q8 f9 Q5 b$ j. v& b# C* Q
}- B+ B; Y( @% {3 k* u6 B" J+ M/ F
socket.onopen = function(event) {9 ?, p$ F9 {) F* n
alert("Web Socket opened!");
+ Z) C* I i* X6 q: _
};0 |* X: v3 V+ Z% P
socket.onclose = function(event) {& E/ D& N5 H" ?. x
alert("Web Socket closed.");8 I; R3 C* J2 f' m% {2 _" @( w- s
};# N/ M! @, B3 n, f
} else {! q7 C$ j" z0 b- [) r
alert("Your browser does not support Websockets. (Use Chrome)");0 P/ n/ B* l, c1 w* \, i. h) f
}
8 X) m. N$ N; S( k* E
' d! ?! M) f0 Q: d0 \3 r1 w" P
function send(message) {
: E! Q1 |+ t8 _( b0 i
if (!window.WebSocket) {
/ P+ h4 s- F" L8 ^7 h" }
return;. e- `: f- ?8 g8 b
}
+ |- {2 D- k1 I6 F' n8 }
if (socket.readyState == WebSocket.OPEN) {8 b/ A8 t% M) @( y0 F8 k& l( N! u
socket.send(message);
# x0 |3 Z8 N& x. `$ h3 X
} else {
' G3 h2 J3 S! b. B7 w
alert("The socket is not open.");7 D& y( ? r; R3 K) l5 Q% l" q
}
1 ]# P& A" A; c+ a2 n @7 I3 O
}1 |2 ^* X5 r8 Y& B- R
</script>
1 l5 ?+ T% J0 k7 d z, W2 t
</html>

复制代码

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

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