浏览器使用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:// 前缀。 $ U1 g P' f5 [- R1 A4 A0 A

" N5 P; c7 u3 D4 g( Z" [
# \- X( }& T7 V2 m: o4 ]该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
# s+ D$ w0 Z$ @* E* ]
}
3 x' b/ m5 t: R/ X# ]* _
6 H a3 o6 I# p ~- g, e0 g8 z
socket.onmessage = function(){
* Q8 `6 ^8 m1 m1 a+ _
//在event.data消息数据: | @+ l) B" Z% M
}
/ [; W2 {: K1 H4 d
* B' m/ K3 y* F! B# h0 f
socket.onclose = function(){
7 O# Q2 o2 m3 l( J# ]
//关闭WebSocket ~0 {0 ] y% _6 L3 L
}
5 t' \% D% P3 u; k/ j
) q. E3 n: W' S( q" F; z" R
socket.onerror = function(){* W F7 Z( p9 o; Y3 L
//错误触发
8 u7 x" i: d* o( L$ [9 r! s" ?+ E
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>. Q Z8 Z! v* `% r# a+ ?/ d2 o
<head>
, i3 Y/ V3 w3 `
<meta charset="UTF-8">
4 n" v0 O5 E, m {
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
. K0 s! [# D6 [% a8 O6 P
<title>WebSocket</title>! p" d" b3 n/ {) S A4 t: R
</head>! M0 y/ T) {$ j
<body>
Q" ?& r& L4 I( X1 e
</body>% c/ n! e# U( h4 S
<script>
8 {: a4 V5 j' @6 |4 X& t
var socket;2 x3 d3 x; n2 o5 L$ @ I8 N
if (window.WebSocket) {+ u' l. Q8 }% A4 w* c# {
socket = new WebSocket("ws://localhost:8080/myapp");
) ~: @3 G/ A8 M$ D
socket.onmessage = function(event) {5 W$ z% [3 S, k8 x4 f5 x
alert("Received data from websocket: " + event.data);& d V1 f2 _5 v5 V
}4 g3 q3 d. {6 S) f
socket.onopen = function(event) {
" v% A3 A7 Q9 V( c9 S% H
alert("Web Socket opened!");
, W) U5 S# T. T, B ]3 S* L- Y
};$ F ^3 d+ ~* v( Q
socket.onclose = function(event) {+ p! W" U, A& Z" a; C
alert("Web Socket closed.");
/ j4 @4 h2 W# p+ e2 L
};
3 O2 d/ S7 Q& ]; S# ^3 d9 E, A
} else {% z7 \5 Y8 {( B `1 T, V
alert("Your browser does not support Websockets. (Use Chrome)");- A$ B% f- A9 X6 j
} D' I% P2 ]3 D! P& S5 _) G; D
& s5 u* R3 B( ^3 D7 o a
function send(message) {# P* D4 a! e4 F; ^- S5 n5 D
if (!window.WebSocket) {9 R' S/ ^* z7 ~/ \% c( s" s
return;
7 Y, }% z- P6 q6 I! Q
}
5 e" a; p1 N2 g) ~1 J# G
if (socket.readyState == WebSocket.OPEN) {& {* }; }* W {( p4 ]: l; @( `
socket.send(message);$ _' S0 c( m4 a2 `" P/ q
} else {! s. G) Y: ~8 S! k
alert("The socket is not open.");) \+ K& K3 Y0 S6 T# N% o: h
}( G1 U/ V" K% Q1 h
}. P. v$ \! G/ J
</script>' i, i' A* s, X0 Q
</html>

复制代码

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

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