浏览器使用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:// 前缀。 7 z' Q4 b% d* m% X
5 f3 F! q' b% Q/ O

4 v% G0 r: Y; W该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开$ D* v8 f7 s0 L% K
}
% S' B4 S+ E0 h; m
+ W: k9 a9 V+ y: i6 Y& ?7 S
socket.onmessage = function(){. _: p3 g6 U- c/ n
//在event.data消息数据
+ W0 j/ W. V; [+ X
}5 h% v# r% _) G2 M
# f' \" x+ ^% {2 C7 z
socket.onclose = function(){
" |) h4 t+ w0 g' p' ?# |2 A% O
//关闭WebSocket+ u, X5 X3 K& z
}
, T2 \3 \! Y; N( {7 |( R0 @
+ t, e; N, h! s; `
socket.onerror = function(){% Q" i6 X7 K( E' F0 e2 z
//错误触发: p( S, j8 ]8 l, }' Z$ U
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
3 `7 \5 W, i4 ?1 ]1 y! m% O! |
<head>7 D3 k7 |. b4 W* c1 f3 W$ G
<meta charset="UTF-8">* ~5 y5 S$ a3 h
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
$ ~- q$ A$ U' f; |' Y
<title>WebSocket</title>
' Q7 J. q' y, P0 q
</head>; C- W" p; @, F6 e
<body>
</body>( o" ^: u* f- L( {
<script>
# ?1 X" {3 V& J* e, R
var socket;
) N9 R2 @9 U" I" r
if (window.WebSocket) {) ?+ C1 b3 g- a5 J
socket = new WebSocket("ws://localhost:8080/myapp");
6 d7 G. z4 z+ i( {
socket.onmessage = function(event) {
# g. f8 o$ J. f+ ^* c3 `' ?: `: ^
alert("Received data from websocket: " + event.data);
8 t9 w3 R2 `3 x7 z2 w/ S5 H
}
C$ R+ h" C: I# D) k/ _
socket.onopen = function(event) {7 s! {1 J! C' k- h8 ^9 I( ?
alert("Web Socket opened!");
1 F M% i. X. v8 m1 y: P
};3 z. a7 x% K. G2 N: u4 x3 y
socket.onclose = function(event) {3 {$ u0 {! m/ y' R' T: R
alert("Web Socket closed.");
; i+ F+ J$ V9 n, k8 x$ G
};
0 _1 {. B6 K2 o1 d6 _# U: r7 U" S
} else {
: `. s$ V7 y Q4 J; m6 m) @1 t
alert("Your browser does not support Websockets. (Use Chrome)");
9 s+ t3 h+ A6 O
}8 J. g/ t+ P$ Q) s
$ M2 o- E1 k+ |
function send(message) {
3 Z+ f- Z+ M. J/ U- M4 U
if (!window.WebSocket) {2 p! l; v ]' ?
return;
& w4 N( J e$ ?, I
}" s- Q2 @( V1 g9 V
if (socket.readyState == WebSocket.OPEN) {
6 {& T/ \/ R- ]4 D; R/ F4 E" @
socket.send(message);
9 M; ]$ K/ P1 W2 U# U
} else {
8 Y8 D: i( v( T9 q- l5 v/ ?
alert("The socket is not open.");) L6 s1 H5 I6 i ]- a9 k) ?* ]
}" d' D2 f( s7 l7 I% G* h) `; m" F
}
w7 G1 C; |: u& k8 ~- Q
</script>
/ k! {" g# N: d
</html>

复制代码

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

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

浏览过的版块