浏览器使用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 p' X+ F3 ]1 c
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
( p. D/ D* c% Z6 D- [. e
: j- ?5 ?( S$ f# s+ [: x
, r! V: R9 }: W9 C- w/ p9 h; D该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
; [+ }: M* j& _ z
9 [& c" R$ ~1 y* k
//打开$ ~, N$ @: y" H# V: Y- d
$ V4 a7 h6 h3 _0 |
}
& p4 K+ u0 e# A( f+ d: S
7 u; Y" h) r4 |1 D- |8 B C- {! ~
2 }. I8 ^! P0 h! @5 x
socket.onmessage = function(){
+ d0 D' ^3 `: a+ s* U% g9 |
Y% Y% b' Z+ r# q% ?
//在event.data消息数据6 }) L6 e. |9 ?; T: H
. e+ d6 v& l& m6 _& s
}' w* e! E7 n5 @8 o! q
6 }6 I9 F( I0 q! C6 k- c
socket.onclose = function(){
: Y. N/ @' s# ?* q6 y6 \$ r8 `$ U
% S6 B+ {: p; H
//关闭WebSocket
4 c7 q1 v; g- J$ A% a0 w, v: X/ ^
: j; t2 L% T) ]8 C" p% e
}0 \/ i" n1 N% l
6 r# R" C6 i Q0 l
socket.onerror = function(){
. z0 c# U2 N1 c( t& `
?! e' {, t5 j% h! n
//错误触发 X' C% F/ F+ ^* W6 ^% F! P
" H6 }; x% }% z9 ?2 @6 a y# Z" ^, x
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
2 b- x, j; G" q) {3 B
<html>$ t; H- H# [* d9 ?0 z) @
5 U, b7 ~, n* S! ~+ M3 z$ G
<head>6 v" q1 V$ {$ P3 \3 z. f( \
<meta charset="UTF-8">
( Q5 p0 G7 Y$ h1 B2 z" F! m
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
- a1 O: `3 x( k
<title>WebSocket</title>, M" h/ U9 A3 f4 h( F1 S% y4 t3 O+ k
</head>
' Z' o) m5 U. w; x" a
! y& O4 T3 p7 Z% @- Q1 d; X( r
<body>
- T" s; M! A3 ?6 i) Z: `
</body>2 ~' K0 L( n& d4 w3 f/ m- | b
<script>
. Y5 R! v3 t9 f) i5 ?" |# x
var socket;
( U- M! ?1 ]9 ]
if (window.WebSocket) {+ u% u. ~! C& i1 R
socket = new WebSocket("ws://localhost:8080/myapp");5 K2 G$ X9 d# ]: f% S: g, s
socket.onmessage = function(event) {
3 F9 E5 M! w- K6 g9 O# h, W% X
alert("Received data from websocket: " + event.data);
! S/ |6 n1 K9 t
}
5 q0 g, p/ n, ^) F, w
socket.onopen = function(event) {( B9 g/ u3 b; ? V: t
alert("Web Socket opened!");. j/ l! U f5 e. ?& U0 _$ Q
};0 o/ e; m, _/ G, H
socket.onclose = function(event) {5 h8 c/ s/ {9 `; J. }, I9 z
alert("Web Socket closed.");7 i h4 b& {* d$ S
};/ c, Z( i4 g% J9 H9 I- D
} else {2 ~6 J& q' \& x G( u* f9 B
alert("Your browser does not support Websockets. (Use Chrome)");% S* J! d6 I8 n
}9 E. h# ~ Q% {5 i
& z/ f+ X. @" _9 \8 \
function send(message) {
/ e+ V7 T* e& ~" s, X( y
if (!window.WebSocket) {
/ F& t2 J! F2 `
return;
% ~/ y( V3 g+ ?$ g) Z3 T
}1 h# i& X$ Z0 _# J! ^
if (socket.readyState == WebSocket.OPEN) {
5 C+ g# z* f* S0 n8 t
socket.send(message);
9 ^* B0 N7 C' N& X8 G# I' `
} else {7 ~) }$ r: }3 S# L" k% N' N
alert("The socket is not open.");
; M/ n) e6 x/ f) ~7 R8 n7 T
}
1 C8 a+ I5 [1 G% y- d" i
}
5 H6 @* G+ A. b
</script>
; |' j' I. X, J2 A, W
" D- q$ R, \' F/ Q" ]
</html>

复制代码

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

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

浏览过的版块