浏览器使用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:// 前缀。 0 Q0 W+ U- G, [7 P! U; ?) J
$ n1 Q5 I' [5 ?3 Q

; p* p0 q/ a9 \' ?7 i该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开1 f- l n2 { u5 R3 q
}
' D0 @7 u* f+ m
7 m7 Y/ M4 Y. U; w# @
socket.onmessage = function(){1 F7 N; |! e# v: @! l9 |9 }
//在event.data消息数据( p+ V+ q g) Q/ S4 p6 e6 d, I
}
5 s4 a0 ^2 y+ `8 v9 X! }& Z% z
6 \7 `! Y- z3 Q5 v
socket.onclose = function(){
* l) M3 s/ M i1 U* p9 g
//关闭WebSocket
I' R. g- p5 t$ P7 D4 O1 d
}% e# A7 u. f: j6 m8 H- Z
- {# g+ j7 s$ a! d! y+ P
socket.onerror = function(){/ G3 Q( g3 I4 U2 a
//错误触发
- D" S# [, T" S2 I( p
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
7 {5 }$ ]( f0 Q4 S5 Z/ h$ @% w @
<head>
# c" _% N1 S" S5 M0 k
<meta charset="UTF-8">
% L/ }- l3 V3 b; ?4 c+ s6 n: }7 I
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">6 B. U/ b. [& q5 y
<title>WebSocket</title>
, Z& {: a0 s+ b8 n! i, ] a6 x) w/ G
</head>8 ]! U, O) x. {! ]4 O
<body>
' J6 N9 T0 i) C1 z. |; o V% L
</body>; W7 b& V* i. U) I, y$ J+ L- j
<script>+ K" {5 V) u5 ?: x% a! _4 W% z) S+ P
var socket;) M3 G/ _3 A8 b5 ?! t- }& u
if (window.WebSocket) {' {7 |2 T3 ^9 `" h% Q
socket = new WebSocket("ws://localhost:8080/myapp");% ]; Y" W6 n i& O/ q
socket.onmessage = function(event) {4 l$ V! A( C, J$ r4 g) F
alert("Received data from websocket: " + event.data);
0 k) @/ J. x1 o: V! H' S/ V1 l1 ]
}
: L: O+ ]9 ?) I) |
socket.onopen = function(event) {6 `! o0 g$ ^; F2 v
alert("Web Socket opened!");5 ~( R2 R: V/ U
};
: J t" e! h1 n
socket.onclose = function(event) {
& K/ O% b- s- B6 B$ Y! K
alert("Web Socket closed.");, Y& g3 S8 w* v; F' ]5 ^! v
};
( W5 X9 f7 t1 @* s2 j7 I0 U
} else {& k$ x Z% N' w" @3 N9 S' G: h; P1 @3 ]
alert("Your browser does not support Websockets. (Use Chrome)");
+ M x3 u( ~7 z+ N7 [
}) {* {: v6 u: W1 K$ u
( q+ w2 J4 u" P3 B7 l3 |( }
function send(message) {
- w6 j$ E ^* J% m& b0 ~* B# @
if (!window.WebSocket) {& O2 V5 g$ p9 m! o5 i4 h4 _' @1 i
return;3 @5 T8 S4 g6 r! y
}8 x+ A: H: k0 J6 F- B; V9 c2 j
if (socket.readyState == WebSocket.OPEN) {
- a. V1 Y( N2 P6 ?5 y3 W4 G
socket.send(message);+ _: a& K- A* ~
} else {- Q* w. M! v; F0 b+ R
alert("The socket is not open.");
* O* E4 g6 k$ Y% Z
}
; } [5 Q2 E+ p% m8 o1 A3 P
}
/ w! s" J+ X$ @3 X
</script>
+ w1 K4 P' i) ?% T
</html>

复制代码

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

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