浏览器使用WebSocket实时通讯

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

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

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

复制代码

+ G! H) C2 G6 P: K. \1 P2 \
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ' H' H9 y5 R) J2 @4 u+ f: R
& K# r% s- I3 A& r; \
+ Y* ^( h# W! W7 K, w
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
' H5 `, T6 M$ @6 D8 u
( V0 s, [# ?' o& C2 ]
//打开, h: w* D9 T5 V
; h! q6 q5 r+ E7 ~' ~* d0 U( l
}
3 c% l0 q+ d% W
$ W/ i( O) G/ ^0 L0 |4 ?
4 R" _* D, c1 D2 \1 K/ f9 e2 B8 k
socket.onmessage = function(){
* ~( B& L, ] C2 U8 e
8 R1 C/ E7 ~2 H
//在event.data消息数据( q. M! K, q N: _
# F! ~- M; q' g9 o
} x$ ~( h2 j' N5 y
. E% Q# V1 ?, q# y" |- ], B" g
socket.onclose = function(){, ?7 G' u$ a: G8 a
' Z. x2 C _& Y/ h5 v' ?% ^# G
//关闭WebSocket
- F; u6 m, y, R9 l& Q- ~
+ I; V% X- a4 x j9 [
}
7 N x+ \. g- @' X) w# h4 c
5 ~ v, a) S2 c- i, R! O( B
socket.onerror = function(){" {8 ?, M/ r( ?0 `! Z% f8 `
3 A3 e$ A. X- T' ^2 [1 z
//错误触发
3 T7 v! J1 i2 ^( ^/ Z2 L
' \/ B; l* ~7 p8 u5 a5 g1 [1 p" D
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>$ D- l2 d6 j2 {
<html>
" m4 e4 E" r! c5 `
4 ^# }+ J" r* _% H
<head>
6 r, P) P. l" M D
<meta charset="UTF-8">' L2 Q% W9 D6 x2 i+ s! h
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
8 N# t1 e8 v' G/ K! q
<title>WebSocket</title>
/ G% q/ e( `/ U& q1 D
</head>
* M- i* h$ Y( g. r4 w
9 L% A2 F( ]* I4 p1 n. l& p8 l
<body>
" W; u* Q$ C5 o* g
</body>: s2 r' q% e3 U% I0 v2 A6 Q ~
<script>3 P+ T3 {9 k0 _+ H& _; Y8 d9 I
var socket;3 v% _, R- p& y& K
if (window.WebSocket) {
; o& v G' A9 ]( L5 h
socket = new WebSocket("ws://localhost:8080/myapp");3 i2 \& i$ X4 N1 G( Q! x( @% J, u* b
socket.onmessage = function(event) {3 }4 o" _% j7 b/ g& L; A
alert("Received data from websocket: " + event.data);
( }' v3 z( B5 B1 I/ F
}
) {6 J/ I1 Q5 _( D4 ]- v. M
socket.onopen = function(event) {
Q& M4 d- X& G7 N* ~9 U% k
alert("Web Socket opened!");
/ K0 A3 X* @9 c% W: v
};
$ h6 t' e- t6 d7 @; U/ ?# N- n
socket.onclose = function(event) {6 n: d! b P" }9 Q. E
alert("Web Socket closed.");8 X( g3 l( I+ C) e
};
; N3 z# Q& x0 J6 ~
} else {
) }, m+ i7 q L, z
alert("Your browser does not support Websockets. (Use Chrome)");
+ R3 l& E* {- H7 z
}3 J' A2 r8 z. W, R2 T1 [! d
h ~* a5 v+ x9 z/ \
function send(message) {
, C9 U4 N8 @ F+ I0 g7 _
if (!window.WebSocket) {
' H+ T6 M+ E \7 ~
return;0 `* ^; Z/ y* z0 Q( v& x( M
}- c& {2 x. b' u1 J$ ]# F' q
if (socket.readyState == WebSocket.OPEN) {- ]0 @5 ^; i, Z8 L2 W
socket.send(message);, e5 ]+ v3 ]" N' U9 v- R
} else {
$ E, w; @) U, n: ~/ z) }# A1 }
alert("The socket is not open.");
) O8 B V+ R- z& S
}: d+ Z9 X! \" s( Z" L
}
3 t3 z" S2 R! r! G, y
</script>/ k1 W9 C) Y5 \/ X \
. P7 ]3 ~# z' k
</html>

复制代码

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

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

浏览过的版块