浏览器使用WebSocket实时通讯

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

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

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

复制代码

9 C, V p1 _' R2 q9 D- b0 d7 s, Z与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ! K5 E8 \! q( b! c4 e0 Z
* W" x5 x. d4 g6 S) k: R- y0 F

: O4 c* {& [) i, v- P) A该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
" P1 Q2 g, B/ e3 z6 R6 q5 z& V
. v* {, l3 n: h% @
//打开
+ g" c) s4 D1 q E: i' e
, B Y `% b# U% Y( X. e. o+ h
}$ x' D0 E X6 K+ @
$ Z* O+ y. r: j1 I5 P
( J; O: D- @! f8 V4 V! `( b$ S9 m+ k
socket.onmessage = function(){2 C1 y# p1 U" |" \$ [' d* C
" b: w2 u# {3 _' e w1 C1 V
//在event.data消息数据2 ~- c: w$ D7 V* V! P4 o/ X$ g
1 p3 {, l! t% y% G% N3 D+ ~
}
0 X: f2 ]: O! H9 Z$ ?. c: B/ t2 K6 n
1 J9 d' [9 e7 _
socket.onclose = function(){
3 \7 O3 I$ K2 |, H7 [! t
+ i8 `$ O6 m i$ @
//关闭WebSocket
' I5 Y; y" b4 H9 q) `& ~
) E) `- I5 e/ j9 B( a; H9 j! `9 x
}
5 _8 o& A5 y8 d! c) V! |
C: N( ]9 s- X6 d
socket.onerror = function(){
8 q& b& G& _8 v8 ?
4 \4 m7 P) o( I! l
//错误触发$ W7 [: u' R5 c# j/ J' ^4 x
( u) G7 E5 D, c* X( I
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>% w" h4 R' ~' Z& T5 {9 P
<html>- Q. O# h3 z, I# m$ p' t( c# v
: P9 O' M! w) C/ ^& ?
<head>: n$ Y4 O3 O+ K2 ?
<meta charset="UTF-8">
, g* k2 a5 h( |5 S9 J4 x0 ~! @
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
- I- Z! o3 G! m) Z# W! x8 M% s
<title>WebSocket</title>
8 d9 I* V" W2 G/ Y( D
</head>$ o5 P( c P( L' {2 t" o
+ Y7 T5 J/ K l8 P8 y. a, c( A( {
<body>0 `# ~1 _9 l* q; H) `# Q' z0 H( r
</body>- U# F9 b$ M' A0 c3 [) n% k8 K
<script>
% c, R/ k- `; s; d
var socket;
6 W) O3 X9 P6 K7 \( s3 r) |
if (window.WebSocket) {
. ]+ G) h0 q+ m! p7 {: ]
socket = new WebSocket("ws://localhost:8080/myapp"); p) m y; X. h8 r" | A
socket.onmessage = function(event) {
, V, i* q' U% M/ z& t& T5 s
alert("Received data from websocket: " + event.data);
% A1 c) y# {; q' p% w8 o6 o
}
6 A c! @6 u+ P t
socket.onopen = function(event) {
( B% z' A" s# s% Z- w
alert("Web Socket opened!");
% Z# J ~. s' M* T
};# f! `, ` w1 M
socket.onclose = function(event) {
1 h" f( l5 ^' {( i' v& @, u4 |5 z+ m: c
alert("Web Socket closed.");
( D r3 e$ e4 W4 y. i3 M- D
};
* X8 r7 b, I$ I0 X1 f
} else {4 W6 D7 n2 G0 M$ R& }8 u3 m6 z( }
alert("Your browser does not support Websockets. (Use Chrome)");: V1 j" L2 L5 |% f1 H
}
( I* w) ~6 \" ]! M* y+ |
) O0 o' G, W- [: ` M, q2 H
function send(message) {
- c4 A/ A3 F' B* Y
if (!window.WebSocket) {
2 [, L- e1 M+ q4 a% m. b* [; U
return;/ n! t" }( Y$ H# I9 O0 ?8 T6 M
}
- \4 Z/ r- }( s
if (socket.readyState == WebSocket.OPEN) {$ \0 R/ ~; J1 n; `' e! S% c/ g2 l
socket.send(message);
* O& x: \- x5 f* F F) _. N: K
} else { X F& T# L( O
alert("The socket is not open.");8 X" K% c. t6 r0 B; e
} Y/ `5 A$ o; i& @4 L0 P
}7 ]2 o5 j r( R
</script>. \; |" M! s0 h1 h. b; N6 y/ ^& u
. u# E* G6 m- _# L& |3 a
</html>

复制代码

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

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