浏览器使用WebSocket实时通讯

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

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

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

复制代码

7 e# Z, o- K" R3 p: q+ V与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
& B/ p- k' H C* [# Y3 h4 @' a
5 v) D' T' G& d6 U4 x1 d/ \5 T# `1 h& M% ]; y' E
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){/ l Z L: W% W7 Q4 _/ _ V1 `
: l# W9 J; q" p3 T8 D8 Y
//打开" o% t& \6 ^7 j# }) W/ }; D
# l$ ~, N1 |3 z+ C% H- I3 k
}* T4 f. K! N$ i- P
) x$ C/ q! ^( d! X: D! Q
+ K+ S, b. Q% k
socket.onmessage = function(){
/ D3 n; i) E( K/ U% U1 J+ D
! ^3 b; i7 v/ t4 I
//在event.data消息数据
^( p5 ], h* V/ C
1 Y% k* A' G+ K) h
}
) c* w' m9 }6 \$ |( n& l
: Z4 v0 Y2 F6 K0 y# q
socket.onclose = function(){
. e) I( V7 W0 Z9 c8 `, a
) ]! J4 q( U: ^& t
//关闭WebSocket
% p' ~3 T8 f+ T0 V
% P& R5 c1 x. b5 b
}5 | v w0 g% q' a/ a9 q3 [
$ b' s: j9 F3 h0 N: X, Q: i
socket.onerror = function(){
' o* B2 H; s# Q! C% h0 h1 w
" v* N# K, `* S' g% R" R
//错误触发) t. q$ m/ m: @, W9 [6 Q
* [' c+ z: U2 k0 v% N
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
7 Z3 \7 _" I* Y. S
<html>! i; ~) v2 B' S- p+ i
) T; y# p }) Y: N) \# C
<head>
( M7 E* S0 A% W- w- n2 Y/ f
<meta charset="UTF-8">5 O8 W9 O3 @! `# _! `
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
y D2 U& [8 @; R" L7 q* i
<title>WebSocket</title>
3 e+ {3 g+ n7 A& f6 Z# F9 j' Z
</head>
7 w2 N5 l9 m9 h! ?3 C6 N
, h( S8 r N) |+ t. m0 J
<body>; c% b7 K; J4 }& H
</body>: P% E6 G0 X+ @5 A
<script>
! W0 o% I* q! R, I o8 F
var socket;
+ z& n; S" U N1 J$ Y
if (window.WebSocket) {
# H+ q; U6 y {" i
socket = new WebSocket("ws://localhost:8080/myapp");
0 D0 v( l* A9 Y5 g; n+ H9 p
socket.onmessage = function(event) {
$ Q* M/ }) L8 Q$ @ I0 G2 I" N3 Z$ E
alert("Received data from websocket: " + event.data);9 Z" @7 ?! b' i$ D3 q$ l, |* B' q' d8 y
}# B& l7 }2 E1 u/ ~' L# D$ O2 X/ c
socket.onopen = function(event) {. ] ~6 J) a# }3 J
alert("Web Socket opened!");1 s4 O6 i J3 I5 j. c; p
};
9 M) p$ B! c% \% W& M
socket.onclose = function(event) {
" Y6 R6 S2 W' M( w; l }
alert("Web Socket closed.");# x& s, A0 z# p" A! M8 x0 \
};
- {) Q8 ~& s. {1 ^$ `. c5 f/ @ ]
} else {
; N, J5 p% P, F" h
alert("Your browser does not support Websockets. (Use Chrome)");* b4 K- T0 D: n
}" F/ S0 |: q ^
7 o9 Y2 U$ F7 C# E5 ^) L1 o9 K
function send(message) {
8 W1 Q4 p7 O( P* D
if (!window.WebSocket) {
3 D# r- d6 I: D3 K
return;8 i$ ]& }5 z K# }
}' d! Q$ ]' I! p9 @4 R: C, x7 _9 Z
if (socket.readyState == WebSocket.OPEN) {
6 p0 P V( A' P, c! j. w
socket.send(message);- ?$ z: f. b( w Q
} else {
$ X: S+ e. H: a8 ~: C" g
alert("The socket is not open.");4 \7 x+ F! N) X2 {
}3 Q6 b! A$ ~6 n9 p6 W$ `; y' }
}# N R* w1 Z- i* o; b% l! C9 }
</script>0 M- j6 d+ y0 I# Q8 Q) @) B2 C
+ T r9 ]; p8 v' P. _+ M
</html>

复制代码

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

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