浏览器使用WebSocket实时通讯

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

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

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

复制代码

# }2 ], ]' I: w8 ~8 Q4 U5 w
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ' o; _0 d [2 |- b# Y( \
I d4 |/ \& a3 x% Y8 d1 s
8 O: M: q7 `% e, [. x$ l. j1 W/ `
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
2 J; y' M0 Y% y( K
: o6 c4 r/ w/ ?4 N
//打开6 U8 E# H e4 {4 C% ~0 z; m
$ y6 N& P# `) l2 U- D: o
}
3 a/ b' U4 T9 p# v! R
& A, ?' O, F5 |
& `/ @ E0 {3 O8 N
socket.onmessage = function(){
9 p6 A' Y* O* U9 S2 a6 k
/ {" {+ E0 ~ } w5 \) ~8 G
//在event.data消息数据
- {' k, O \/ |1 O6 Q
# X! e J: w! i1 u
}4 k& M$ F3 i/ ]* a9 d0 p1 t
5 U( _- ^8 M6 x" [+ ]1 v6 t9 {
socket.onclose = function(){
% P) [% D6 E4 n% D$ M1 y4 z3 V% K6 G0 Z
4 p+ ?% P V$ c C$ S% J) |9 d7 z
//关闭WebSocket, W+ V. l* h7 d4 \, ?/ J* L
) [" r) d' l# @+ K/ i0 E
}
; G a, g3 U- ~- k8 Q3 _% p+ H9 M- E
* e" D) W2 \+ K6 s
socket.onerror = function(){
- F6 v/ a2 E7 J6 S% u
( m4 F( y L/ N0 M$ B9 Z
//错误触发+ s% Z7 ]* a# L
# h# c1 c+ G+ o- K* L9 Y2 F5 t
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>& R/ R( `( j. H8 q
<html> {2 i# a' I! ~8 z6 k( B+ K* {
1 s6 o* k; a4 T+ x4 n/ C
<head>; q8 e0 p6 X; C1 O
<meta charset="UTF-8">
( d, {$ _) Z: i; m8 h/ u/ Y! ?
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">6 @) A8 O% @8 u) x+ C
<title>WebSocket</title>& d1 o. D; U" Y2 r. `
</head>5 @5 j& w! P- T! o
: V* B4 @( e4 f
<body>
; d6 B* E y* t1 h6 J
</body>
' ?/ ]$ h5 D0 l- E Q
<script>
+ o% n. q l1 b( @$ D6 {" O$ @
var socket;8 Q3 j5 n: J9 C% ~" ^
if (window.WebSocket) {
. b: i- m/ r% G+ k
socket = new WebSocket("ws://localhost:8080/myapp");
( i1 Q/ F6 ]6 T( Q
socket.onmessage = function(event) {
alert("Received data from websocket: " + event.data);
% x+ s# }/ |5 j. {' H4 B0 W* m2 I
}
& V* c: G; `9 D+ t3 W3 r$ ]: v0 }
socket.onopen = function(event) {
$ O) R ~& x; A" r/ Q+ C& W
alert("Web Socket opened!");
) N9 i9 k) ^- q# z. f% ~
};
. V8 j$ C" _ @) ?7 \3 a
socket.onclose = function(event) {. H. K1 m' Z! n+ c4 H- M
alert("Web Socket closed.");
0 Z8 Z1 a/ V! a2 y, x; q: f
};. W0 f% N/ W! ^' l- v" }
} else {& Q* `* e% V' z% c& j
alert("Your browser does not support Websockets. (Use Chrome)");# Q. u" M5 c4 D1 d1 W# I! J
}* u9 r d, T$ Y7 n% m
- a: K1 e* n K. a" H8 a
function send(message) {
* d8 b* z5 L+ g1 ?+ a1 }
if (!window.WebSocket) {
) j" I: X* u- I% F/ Z
return;* ?5 z1 o" k1 l0 I8 R
}4 |/ J4 l8 a9 n
if (socket.readyState == WebSocket.OPEN) {3 J# a9 r% l6 t( m9 }
socket.send(message);) B7 _6 L1 f& H4 g. H, J
} else {+ C9 d0 E1 m) _6 v% K/ y
alert("The socket is not open.");
4 n2 I* W( U y/ t# f: G; I
}
; A7 [9 P: C1 q' c
}
" Z4 Z) `, N$ b
</script>5 ?( ]: h6 x: W. A! w7 \: E) i! p
: o1 J3 K& P' J+ l3 W
</html>

复制代码

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

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