浏览器使用WebSocket实时通讯

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

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

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

复制代码

) E" Y. n7 l' z$ I9 Y
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
( ]! q3 K3 H- \; K; [' w* B& ~
4 K4 q9 t$ X: t) }, A! o S
5 }1 s# F4 a$ B# e, v该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){3 t$ F4 N% q3 U! v0 ~; | s
; T7 n2 Z' p3 B( |9 a9 R' s
//打开
- t: ]; L9 B( r- V7 H/ R% y) p
) E+ l" |; m5 J/ o, t
}+ Q7 q3 s. X: J3 C7 o; e% U
5 U) G; O7 X! k! v/ \/ Z0 T- r( Q
! Y: q' J3 _" C3 z
socket.onmessage = function(){+ j- y3 T6 A6 W8 s/ d
1 Q" d2 a+ q+ A3 O
//在event.data消息数据4 c/ I+ o6 T% q/ D, O' l6 y) L
4 A7 U+ O+ g1 R. g) i
}
" D7 a$ ~$ ^8 s1 S9 U. K) G
% b1 M$ N' M4 ]
socket.onclose = function(){
( B+ x* X3 \; m' t* W2 I$ s/ s. i' N1 r
# W& l) e2 K: [& W: n( v
//关闭WebSocket- z1 s* y! _6 {, O2 B
7 v) z7 Z$ A/ W) f4 {! J: {
}
- ~ O1 s8 l6 O: E' ?6 m/ s
8 A g- Y- L1 H t9 p: d
socket.onerror = function(){0 n4 H7 i' S0 K3 ^* B
+ Y8 t+ m3 C! T: p! E6 X
//错误触发
7 E3 j8 n1 M: v, s1 ~2 g& j
- a- B+ p/ i7 R& F
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
0 E, | ]/ k( O: }3 q6 |( Z
<html>8 B9 G% T9 D5 w! K
$ S* l8 ~" N5 T4 s' D0 J
<head>
& i- L4 S3 O3 F9 e
<meta charset="UTF-8">
3 U$ A* ~2 L2 o( a7 N" K# z! u
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
7 ]2 t! u. l/ `
<title>WebSocket</title>
7 }7 X7 V6 n1 h* @
</head>/ v- h: z; U; Q8 A- @8 i
1 ^ @% H3 s- j' r
<body>
- K Q3 ]& M" Y6 B' q
</body>
! p) }/ g5 S [6 w1 [/ {# M, A7 c* H
<script>
/ N2 x2 {" u: U, ]- u8 o
var socket;
, ^* r( H: I2 w. Z5 h2 O1 z/ t
if (window.WebSocket) {
2 ^' H1 B( b/ a
socket = new WebSocket("ws://localhost:8080/myapp");
# ~0 w9 c: K3 Y% q/ I, e
socket.onmessage = function(event) {
9 a6 x4 B7 u: ^8 S! B+ ^: r
alert("Received data from websocket: " + event.data); _, h- W- f( R# _' }4 C! r
}
/ ^' H6 L" g- }5 j+ ?: \
socket.onopen = function(event) {
, |+ F1 N- T! S# R
alert("Web Socket opened!");
- a5 i- y5 L U# X7 G7 v% \% H# s. ?
};
! r& f* Z {( f; d. n
socket.onclose = function(event) {
( W: G- p1 t. r9 A4 a R
alert("Web Socket closed.");
9 y" Z- u5 y3 h3 l
};* h8 o& p# t6 Q7 c5 c' z0 I+ ~
} else {
& I6 X7 E3 H2 N8 i6 c
alert("Your browser does not support Websockets. (Use Chrome)");9 q/ |# W8 d1 ]0 U5 \
}
7 D; m, r5 S& {2 \6 \4 w+ S; m
$ M4 e- y, ? E: G5 p
function send(message) {1 X, f7 f+ B9 f+ z h8 P: ?
if (!window.WebSocket) {
( q+ n- I1 k( W. E% T3 N; c9 Z
return;
' o5 H- Z" s; J/ T
}
* X2 ~5 S w! x- h H1 `+ [, T
if (socket.readyState == WebSocket.OPEN) {% a& T: `) | J: ^
socket.send(message);9 k! H4 `/ }2 b4 r- \& v5 ^
} else {
" F0 \' D1 x' D5 ?2 d7 A, w, T
alert("The socket is not open.");
* u! w5 g8 T4 `1 x- T4 z! m
}1 r1 h1 R; I- S! ?% n
}# P: C) {3 G- U- r
</script>
: J- i9 [/ @6 y4 a
# _# N) X; C T5 s
</html>

复制代码

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

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