浏览器使用WebSocket实时通讯

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

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

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

复制代码

2 `: y3 N1 I J与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 0 J, Z6 A5 S" h- J- N

# S, Y5 N+ [. v! V/ r# ]
5 E/ U7 B/ \" r) q% T: Z- X该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
9 A; K' D2 {* j4 L8 Y3 W6 w
% H& c# I. ^' z$ Y% X' Q
//打开7 L: `; J* e3 Q+ T8 A! s
$ r" }0 b$ a, E J
}
4 w1 B5 {4 G O. Z, b3 d
' S3 ]: S0 H* N" o
5 X9 l; `. M2 U( V7 [- W9 Q
socket.onmessage = function(){
, s! d8 j% N4 H
" K: `" h, @6 E9 M5 g
//在event.data消息数据
* p- ]: K# j; G5 ^& b
% t) T& Q& { G* R5 c
}- s1 j8 l1 r: o8 r' N
$ w( W' l% U; U3 Z* A& C
socket.onclose = function(){
5 \5 W3 u/ z5 q
& @* }! e5 z3 I& X- x
//关闭WebSocket& Q, x3 E6 e) A5 w+ Z' T) a
8 u, q, a" l! D. t& o. _
}
6 L7 {( x: k: m- O3 }; l: m1 |! Y
- o; Q5 n7 @4 C D* _* ^
socket.onerror = function(){
" O, D o: {9 I7 j7 H. _
4 y v) R+ i- W8 S
//错误触发2 d5 O9 I0 A l% n& n+ E
. |) _8 d; ^8 D5 ~, Q8 K/ ~
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
7 k$ T, o0 ~: I. _1 p
<html>
7 s: |5 j R+ l( \1 y4 n
) c q) M8 c y, I2 K
<head>
3 n8 R2 s0 D5 {$ k/ a6 H( [
<meta charset="UTF-8">/ `0 y; F/ t/ E. m
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">: m# V) [) ^$ T& r
<title>WebSocket</title>9 K8 B) g- L2 a& D* P
</head>. Z, e6 q, ]( ~8 ^* }+ ~
# m& K" V% v) `3 l% P$ ], J' ]
<body> m- C% A. {: C2 C5 _8 @/ D
</body>
6 L0 n6 M9 `4 ^. j/ h8 i9 G
<script>
, |# p/ R% d( U8 Z4 x9 }
var socket;
6 I, A" B. o& }2 u9 c: W% S3 }
if (window.WebSocket) {" K- B+ }4 w& i( j. K
socket = new WebSocket("ws://localhost:8080/myapp");
1 a9 l6 n. ^: t3 J7 S9 n/ B6 u0 @
socket.onmessage = function(event) {
- T6 ]( @- l) A
alert("Received data from websocket: " + event.data);
+ h: O* \ Y" S
}
( I# f4 K4 r7 z! {! M! P
socket.onopen = function(event) {
2 Z/ x! \6 y! n
alert("Web Socket opened!");: [- m D; W: }/ Q) a
};) o1 w. {3 L( z3 D) j; d7 v
socket.onclose = function(event) {- D5 d2 f1 I) U" U* d5 b
alert("Web Socket closed.");
* Z; q Y2 e/ k) h7 `$ B7 O
};
9 \7 w6 Z$ j7 h8 B
} else {& U, S& _" h: t; k2 J+ _ |% k
alert("Your browser does not support Websockets. (Use Chrome)");
$ v6 Z' u& M4 o
}' N: Q- n1 N( y9 r% J }. z$ u2 P6 U
% E, @8 z, x# q6 N1 H. ~; A( T
function send(message) {( m; f* D o' m" q# ` ]
if (!window.WebSocket) {
: _: Y$ L1 C, X- H. g' g
return; n: O- y* b. K# k2 d9 ?
}
( S9 i5 ~5 r0 R/ n2 f0 p! G
if (socket.readyState == WebSocket.OPEN) {
+ j( |! @, ~8 B8 K
socket.send(message);
; n2 p4 I* Y( P+ F* H% J( L2 ^
} else {
1 K# ]; { D# Y% r7 r7 _: X4 C6 t
alert("The socket is not open.");! J! B( J9 a, A" x$ s+ g
}
! F" q, J& p4 c* Z% J
}! m: u; g8 K5 B* l/ T
</script>
- ?; h$ Z1 c# S8 F9 l' E E
4 \& P6 }% [& l
</html>

复制代码

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

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