浏览器使用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:// 前缀。
F4 p' c' Q0 c0 o& I
7 w8 r$ u- I& D3 d0 K& S
" W/ O' p0 n% { m该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开- h( I! P5 A; j" P! j* P a
}% ^4 q4 R0 m5 [! y) K* T( o" u3 G' M
8 O4 P9 p- w# K" W4 U, p+ N- i5 ~) l
socket.onmessage = function(){
% H6 T2 t+ X. ]4 b
//在event.data消息数据6 {! [; |! Y1 E" A# {# ^! F2 Y" R) k6 P" q
}+ T* y: R! Z5 ]& d6 F5 m2 ]( W. b
; K% I- W# o% o4 e
socket.onclose = function(){. Y) A0 }9 q1 M& g' P; Z
//关闭WebSocket& W( [) {% E' h9 P* M' m7 k1 t
}
8 R3 B& b" c: ]. |7 S& F4 Y \1 {
- |2 b9 H3 f* c9 t
socket.onerror = function(){, }" }9 ]) w. C
//错误触发: s7 @% t5 t; |1 G
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html># A" f V% I" X4 e
<head>
( v+ k. ~5 \% W" q
<meta charset="UTF-8">( l% q6 Z' X8 j8 |! E2 f U
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
: S w2 y# Y( e* d
<title>WebSocket</title>& ?& r9 X$ G, \4 G7 r9 Q/ ]
</head># i; @/ p3 E; w$ Y* P0 o
<body>
# x+ R& t. p+ ]8 g; X' \! `4 w/ Z
</body>8 d& A7 _$ n) J9 T* E
<script>: |% P; z# H" T+ S8 v
var socket;
' e, ~5 v! f: U2 N4 P) N
if (window.WebSocket) {+ k! n7 f u0 C% q' a- e
socket = new WebSocket("ws://localhost:8080/myapp");2 P/ S; c& ]% K
socket.onmessage = function(event) {
9 Q/ k# L; {9 `' W# W5 o+ `
alert("Received data from websocket: " + event.data);
6 I! {" A) Z: D7 E4 d! @1 t8 \5 ~
}
0 p8 l- p. H& o( O- B" U
socket.onopen = function(event) {
( O/ I2 C3 I6 Y. k4 e
alert("Web Socket opened!");
( K# X! l! g, {
};
& P: I. h/ i0 r
socket.onclose = function(event) {
9 r- |' Q6 P3 e, [3 a3 `+ Y ?
alert("Web Socket closed.");
, g/ \/ q a2 ^ r* M4 E6 V6 }
};
# a( X! _( `4 w$ T( K4 G
} else {0 T8 U8 P: m( k* M6 k3 K: c. a
alert("Your browser does not support Websockets. (Use Chrome)");1 a9 i7 {8 w, E/ C' @
}6 L' Y; b8 \8 X* m- A
, y6 L+ K# \7 o9 Y! @" x8 n4 _
function send(message) {' X$ H3 Q9 i3 R- l8 f
if (!window.WebSocket) {0 E2 g" W3 F: j1 l6 |; `% r/ f
return;. W( Z% P" ^& e2 y3 r8 R7 y
}
3 h6 ^1 b+ h0 r% s( m
if (socket.readyState == WebSocket.OPEN) {
" H; K0 i7 Q# G4 }7 `& w7 I9 I
socket.send(message);9 O! u8 [2 V) Y. {: K
} else {# Y- ^% w! _6 V: v" h
alert("The socket is not open.");' E: R% I7 U8 @
}; a9 l7 {# X1 ~, P' l
}* T' B% O; p" }
</script>7 l; F& _/ ]& Y. U* w( p
</html>

复制代码

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

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

浏览过的版块