浏览器使用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:// 前缀。
% q/ q0 W. O0 g
. E' W, H# E' v1 j+ J1 E7 X5 P; F6 x8 q; u# z/ |% p: ^' g- c
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
! E! t) ]6 y' G+ N% m' D1 |; W! |
}3 v. Z5 F& C$ T1 o. E% K
5 I1 L2 T' M+ Y
socket.onmessage = function(){! [( p$ }& J" Q- p5 h' V% d
//在event.data消息数据3 g1 k) X" s! H- m6 w# t0 x
}6 Q" H0 \# d6 I4 [4 \, X9 [
2 T+ |. Z; o7 A+ e, G' p8 f
socket.onclose = function(){
. V; d# U0 Q- D, ?2 U; U
//关闭WebSocket
% l, [. |2 Y/ f9 Z% g+ E
}
# v' P1 O+ J/ q. R' b/ f5 ?
8 G7 ?7 V+ B" l1 w X/ u, U
socket.onerror = function(){, y2 V* Y; j5 K; ^0 c3 U
//错误触发
2 s+ x8 J" Y5 y/ j1 C' Z
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
! n. ?, z) w) H! R7 }; a, j
<head>
! s4 w1 t$ z \6 z
<meta charset="UTF-8">; B k: j6 | r) X$ d4 E( f! k
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
5 e- f5 ?; u) t1 {& N# n
<title>WebSocket</title>: P. x8 ~9 s" B1 P1 N, i& I& S
</head>
0 p% a$ w2 c: w/ H, J7 a
<body>
: r Y! d1 v% t! |, }
</body>
! D/ e8 O; v3 L. j" u6 ?2 p
<script>
i/ x) n3 U9 {7 F8 N: d2 \, w, m
var socket;+ x" m8 d- C4 F+ E, \' `
if (window.WebSocket) {
6 H/ Y$ N+ j# @& t6 o: N
socket = new WebSocket("ws://localhost:8080/myapp");
" T& q+ t$ ]# ^: C! `
socket.onmessage = function(event) {
# ?3 d# P% \4 e
alert("Received data from websocket: " + event.data);
I; e' ~( n3 @
}
9 r6 }: h1 t* V5 y2 w, C
socket.onopen = function(event) {8 e: u3 ]* y! @, v) k5 a8 g
alert("Web Socket opened!");
4 ]' n G% I+ R3 I" j T- |# J
};
% ^3 l1 e( Q2 f% j
socket.onclose = function(event) {$ N; D7 T) Z1 J2 J0 m' C
alert("Web Socket closed.");
. @ P1 p- {# d) j. x
};) U" |0 @" E3 ?( ^7 z5 p( [8 W
} else {! m; T2 z; l- R. P
alert("Your browser does not support Websockets. (Use Chrome)");
. M- M$ C8 Y. ^( ]$ D U/ A3 y
}+ ~( w9 Y9 }2 G
) B3 M% ]0 ^# r: ?2 g3 b5 y# h0 l
function send(message) {
4 e# S- y: f' c$ T0 S# k
if (!window.WebSocket) {
" Q" [! {: c& @. d' O( {9 R: e% E
return;
5 C d- Z/ H' j$ ]& I$ H& |! `
}
, u8 z; Q, e# x1 K6 D
if (socket.readyState == WebSocket.OPEN) {
, ]8 a1 m7 s) W) v7 a6 I
socket.send(message);, y6 F+ P; I, g6 U, d3 n
} else {
: Z+ B5 k/ s8 m; F
alert("The socket is not open.");
7 x5 L/ N9 z+ b2 d* `* t1 L
}
5 u; V+ u- {7 i7 |2 {
}1 n8 ?0 L4 D' }3 T
</script>
" `( p7 i% f# B$ ?+ T6 `8 `/ f/ O
</html>

复制代码

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

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