浏览器使用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:// 前缀。 6 s1 ^( }8 T& q$ @# M+ X7 V

5 F/ @) W* a: d. _# ]7 a
" P2 q4 l) Y6 M5 a该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开. r6 I a% x! Y0 Z1 h$ P6 A: p
}. B7 a2 {" [% }! R! u
& R4 ?1 a5 X& u& F$ g) A4 }
socket.onmessage = function(){" D& z" ~1 ^- y" X7 f% x+ `
//在event.data消息数据
$ a& w2 k+ o" y8 a, K1 g+ V
}
) }; l1 {( [1 ?- O
7 O! s; V) U7 G" y
socket.onclose = function(){
6 W8 Z( P6 u$ ]# [
//关闭WebSocket- b* k* V' p. N
}/ w u; p2 w" X
$ C* p) w- ^1 a" x) q* j( F, c
socket.onerror = function(){; T* |- @; W1 E) Q7 l1 u; S9 X/ p
//错误触发9 k7 q/ N# q4 f) V& w4 f" O6 \
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
' E) v$ ?3 l' c. R! [
<head>
+ k3 F& _ y8 `+ @' H7 m9 s
<meta charset="UTF-8">! C s, \% |( W5 v, W1 S
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
Z/ z1 F& K' e/ r, i
<title>WebSocket</title>$ A9 x$ T# _$ J3 f
</head>
# B5 Y# B; T# ^7 ?$ ^+ s0 |# C
<body>; b; r6 c$ u! k' d% I2 r- q
</body>
3 A+ l; a- x) A$ ?" H& L
<script>
! T1 m# |, K: m$ C; S
var socket;$ K: L* f( k0 N* }; s
if (window.WebSocket) {
$ G ]( E. z, `. `: s _ d; c
socket = new WebSocket("ws://localhost:8080/myapp");2 p5 P) E4 Z: e3 [
socket.onmessage = function(event) {5 N+ N6 R$ Z. x
alert("Received data from websocket: " + event.data);; ^& u' l0 D7 G
}
4 q* J7 W: ~8 S$ a
socket.onopen = function(event) {
4 z) c- g6 ?' B" n, o6 q/ i
alert("Web Socket opened!");
, i. P5 F/ z8 g. Q9 {
};% V5 w5 H5 L; y
socket.onclose = function(event) {) x2 A8 F- L2 e
alert("Web Socket closed.");
7 x* t$ p, P; \6 t: @
};
: A% }* A2 x0 F5 S
} else {
; X9 \! ?: X6 R
alert("Your browser does not support Websockets. (Use Chrome)");
. D2 U9 ~& `7 h; H3 x3 _, n Q* g
}
* G3 |, p. l! g0 b7 c8 a
9 F' r3 z$ b" n x# r5 V8 D
function send(message) {
0 D: M; _4 M$ r0 H6 ^
if (!window.WebSocket) {
- Y+ q/ Z' Q& U* Y* e& P: o
return;
( s1 Z; [8 p+ Y& f: o
}: u6 s/ u# Z- d1 q1 O& M
if (socket.readyState == WebSocket.OPEN) {
& O3 N5 J) Q3 D3 N1 H2 c% c
socket.send(message);
4 u+ Y8 N7 F* [# R
} else {
, H3 R$ |7 d: W9 D
alert("The socket is not open.");
( e' `+ i% ~4 m+ z6 z! |
}$ p3 V3 X, ^4 J
}
' I# ?3 E) G" l4 n4 ~( x8 S8 P
</script>
# A3 \ U1 L5 o: J z
</html>

复制代码

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

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

浏览过的版块