浏览器使用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:// 前缀。
- |" ]0 B- H, O
9 \! j0 D* |! i7 d; I1 a8 u: T# N
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开8 N1 W% ?4 @% t' @2 l
}) H0 G B+ E9 B& b$ ?) p
- {4 E4 m3 D& r
socket.onmessage = function(){
4 o/ W3 v1 X, H- r( Q: D
//在event.data消息数据
+ J+ F# O0 o" T9 i: v6 Z- {
}9 U" {- K- E, K4 K
- [/ F7 Q: Q8 `; E/ F( Z( s& I# N
socket.onclose = function(){0 Q3 y& p6 ?0 o& P7 O
//关闭WebSocket+ x8 |+ W6 b' @# T* J7 I
}5 a2 Z+ S" [) f- L9 Y. x
2 P6 u, z# J; Q
socket.onerror = function(){
9 ^3 ^/ p2 v4 n; l
//错误触发
, ^) Z9 h# q" q7 o9 E! x: }
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
5 E$ m: ~) d6 B+ o% r9 B* l; s/ n8 E
<head>
" D. f* R/ ^( `& z
<meta charset="UTF-8">2 @: Y9 p4 |$ }% a4 ]! v; e& d9 _
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
7 O, x2 ^& I' ]6 X1 {7 P3 u
<title>WebSocket</title>5 {- N- b. j3 ^9 g# i
</head>2 x% R& U# M! k9 E
<body>+ Q# V# @; c2 I# i4 ]1 q' S
</body>
1 [9 Q9 p( x1 }% A8 N; I
<script>. W' _$ E9 q* P1 J* f
var socket;
0 N4 n- ~; z$ Q! e% Z3 i
if (window.WebSocket) {* r6 D1 x4 J4 l. g. s
socket = new WebSocket("ws://localhost:8080/myapp");' {5 w7 f( U& y/ S4 n9 N. W7 x
socket.onmessage = function(event) {1 f9 C7 L) D1 g( l g
alert("Received data from websocket: " + event.data);
9 g+ ]% ~: F. l
}
6 y8 H& }# q! w' c+ B0 n: \
socket.onopen = function(event) {5 V4 r) E3 H: y2 ?. y3 [
alert("Web Socket opened!");
6 e9 g: e% s& n# C; [/ ^9 s x; G' n
};
+ A7 W5 R: x; c. f$ I! V
socket.onclose = function(event) {1 A) p! R7 @/ x* W5 a6 I
alert("Web Socket closed.");
; C8 \- L" _6 U/ `- g
};/ i# M& f5 Z3 d, N8 z# `
} else {8 g; h# z4 K& s1 {- i0 a
alert("Your browser does not support Websockets. (Use Chrome)");
$ D( W0 @' C" {6 I/ q" v
}
3 m* @1 q) b- O: \ O. q% ]8 y
! p. h0 m/ a- g8 L Z/ {8 ?8 t- z
function send(message) {' `( s1 k' b4 @7 V( I
if (!window.WebSocket) {
# A3 e3 f/ o2 r/ f, v" I
return;# N5 q+ _* c4 I+ ~1 ]7 o
}
: T3 g" Y/ @4 L3 N. I% [. M( n
if (socket.readyState == WebSocket.OPEN) {
" g7 J: @ b+ t
socket.send(message);8 V5 a1 ^/ j" K `4 ^/ y) g
} else {+ I7 k* R; q/ V. d7 r
alert("The socket is not open.");, T. O# m$ {; ]* }/ H
}
) e3 J4 p& _6 o4 \* ?
}
/ d: m+ b b2 M$ H# [( P% [2 r2 I+ y
</script>
0 v; M. j# E$ H% k" q
</html>

复制代码

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

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

浏览过的版块