浏览器使用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:// 前缀。
5 a" K1 q4 t; m; i; L4 x9 S
, E: ^7 Y& f; N* P5 a1 r' I& @- m- [! `
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开 J8 d0 D7 f# y( e" ?9 B5 H
} E5 L- a" I4 u5 d* \- p' ]3 [( K
3 R1 I: C) F _7 m3 t! [! y8 y
socket.onmessage = function(){0 ^7 \+ ~- [0 R
//在event.data消息数据
! m1 h2 D) Z/ K6 k
}
" m3 s" u* K5 ]1 w- K( J7 m
3 K5 S9 S% w2 v) m' X0 c" \
socket.onclose = function(){" [& G+ @" e- j
//关闭WebSocket
! n$ @( q M5 z/ g- q: y* M! C
}/ C+ c% |/ S& C" P3 r3 T
3 ]. D4 Q3 S+ |5 X# ?5 n. X% l
socket.onerror = function(){
% ^! M5 i1 O/ B8 t4 w; o
//错误触发. y' n9 B) S3 b6 z
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
. t) y# q5 z) [# n
<head>9 h: N* J+ I' O" W. }+ o6 W+ j h
<meta charset="UTF-8">4 m, R5 j# }/ A f! [7 W
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">, O( I* Y- R, C: z
<title>WebSocket</title>
; U; I% A* l5 N' D' C, g" e* r
</head>
- p& [% R, U& b2 z
<body>
5 |/ _; g/ g& I$ v( R; X
</body>; D5 ]1 n$ g _& H
<script>
0 E; v" l4 S4 j# @1 G/ h t- b6 q" L
var socket;
* g! I! F5 }" C
if (window.WebSocket) {
4 |1 U/ p7 v. z
socket = new WebSocket("ws://localhost:8080/myapp");
) J! t2 l# V3 N" `3 Z% F
socket.onmessage = function(event) {
0 J" j% m% H2 x+ z+ S
alert("Received data from websocket: " + event.data);; [7 U3 f$ D' X. g
}
; Y+ g0 w% t' ]# W7 ^! F
socket.onopen = function(event) {- T* C. p, h$ `5 `7 ~* k4 q- p
alert("Web Socket opened!");
2 {7 y" y# P! ~ s
};
0 k8 V9 [! @% m; _
socket.onclose = function(event) {6 i1 k2 ~7 M o6 N6 j2 C# P
alert("Web Socket closed.");
( L7 [$ C5 m$ q4 w& J* V- J& s
};
4 ^/ X; {& |/ S" k( T8 b2 s
} else {
1 \2 S9 E* j( R
alert("Your browser does not support Websockets. (Use Chrome)");$ s0 [4 }1 l7 ?0 M2 P9 c- G
}
8 A/ W3 Y9 K/ i2 A/ U" _
3 ?" H$ \/ e5 ^' F- }
function send(message) {% a; i& _3 e/ Z6 O: S; M7 v) S: ] y' W
if (!window.WebSocket) {
; V% a5 e) \& m( f3 U1 Z: @
return;4 I' P' c5 ~ w9 @
}
; J1 x8 i! w7 M! j( U
if (socket.readyState == WebSocket.OPEN) {
! ~; i% h9 r/ `
socket.send(message);- x0 U& |' ^& a; t, b: E. k! T
} else {
! Z# h2 ?. P, n; ^3 }/ i0 ]$ H
alert("The socket is not open.");
+ ~1 h) e; \1 {$ c
}. e- N0 n3 q8 ^# M3 @! H
}. j' d' B7 i9 G
</script>
4 D. N/ P* b, G# @0 o
</html>

复制代码

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

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