浏览器使用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:// 前缀。 ; k$ Z$ ^9 l5 v$ `- E+ @. Q- F
7 j5 i/ o) P: c' o ^; B" _
1 ] t: t; e* e8 w5 |3 p
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
: A0 r5 h# i6 h3 `! _
}
2 a+ w+ K1 C) G% r0 Y3 x
' f9 _" B# `3 @
socket.onmessage = function(){
g0 T1 g0 D+ n# _
//在event.data消息数据4 P8 X, `5 W. ]* j/ v
}
% u% ?/ `9 a7 {& I4 V: [3 F3 L0 C
/ o& o3 P! N5 L2 ]2 }% C
socket.onclose = function(){
( y6 ]) C# R- I4 t2 s% O
//关闭WebSocket0 T/ q* o: t# R/ U
}+ B9 Q( L( b* B- Z* R, r4 B4 y
@: B) x/ e) M2 L
socket.onerror = function(){
8 O1 u4 G6 b- ?9 x
//错误触发, U* b( R6 L. R! j6 U
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>+ a. l" ]! n/ C r% D- `% K
<head># ]5 j- }. l5 d8 |5 n
<meta charset="UTF-8">
% h( Q3 z7 u* {$ t) l' Z
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
. \8 G3 V6 L7 G4 [
<title>WebSocket</title>
: v$ w$ l8 g; Y# f" ]
</head>, X8 G8 h9 u+ |4 R3 ?* g
<body>
$ i$ g% T8 v+ l: {" w
</body>/ G' d N8 f1 H b: k
<script>
% M: `+ J. \) W
var socket;8 t& F. h: a. R4 t8 P: I
if (window.WebSocket) {
1 g3 C) U& q, {6 s! |/ R
socket = new WebSocket("ws://localhost:8080/myapp");! V. Q! M8 g' Q. f! B
socket.onmessage = function(event) {
@1 w1 W% @) E
alert("Received data from websocket: " + event.data);: ^8 J3 |9 D3 j$ T$ d* z, ~! a
}7 v& c( V6 I, r
socket.onopen = function(event) {# }' w* m, r* t2 w, z2 ~8 _
alert("Web Socket opened!");5 k. r/ |. M3 ]3 `
};. Z8 ?, ^/ q- I. m
socket.onclose = function(event) {1 P! i6 U0 i7 ]/ j
alert("Web Socket closed.");
0 ?9 \: [1 m; @( f! h9 S. Z
};
2 o' B. l" q$ J9 U* r* x- ?
} else {
: \+ j; |" Y, E8 c4 O
alert("Your browser does not support Websockets. (Use Chrome)");
' r: w' |/ x7 ]/ R' H
}0 f# V; e/ T7 F, ?
6 X2 X) X: O; p( |: A* a6 F
function send(message) {
9 W- p' ]% i0 _/ w; h# w4 o
if (!window.WebSocket) {4 j. v3 l6 _$ G" n/ C
return;& V+ w# t/ |6 p" r1 T, Q
}
2 X y. Q' _% n! q; a) F+ b
if (socket.readyState == WebSocket.OPEN) {
/ u% O6 l8 m1 J8 @+ _
socket.send(message);
5 i8 P o. h+ L r1 y, l
} else {
5 L* u7 Q: |$ d5 x. O9 p6 n' W
alert("The socket is not open.");* J4 F0 z9 Z; T D
}1 a/ V# `1 H( |' W
}. o! r% [: g- X' s4 q; G
</script>$ t6 I4 k# \" f" Y' R8 e: _' G
</html>

复制代码

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

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

浏览过的版块