在IIS上搭建WebSocket服务器（三）

admin · 发表于 2018-11-7 00:42:00

编写客户端代码

1.新建一个*.html文件。

ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
这个地方的IP和端口号对应着我们搭建在IIS上的WebSocket服务器

<!DOCTYPE html>
+ o3 u. \$ C( S/ \3 N/ v- n8 K
<html xmlns="http://www.w3.org/1999/xhtml">0 P: z/ `* |! d5 t: Y# V
<head>- u" I3 ~! b, S8 b1 k
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
* h' i! d6 M$ ~4 l
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
+ |7 I5 ]5 L, w6 L+ Q# }1 Z
<title></title>" j; j4 Q' { y& Z( V4 y/ ^
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
& \, C' M1 I) k! ]" B4 S8 |+ F% \
<script>. b1 J$ ]9 t; U9 z4 O
var ws;
3 y, U* v( M5 z7 u
$().ready(function () {
7 Z) m0 B, J) J! F
$('#conn').click(function () {5 R' H4 a/ n( J9 h; z
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());* Q! A, B) B/ {, v+ s
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
4 c7 R( ?! ]6 X- C% b
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
* n: W: I% y, N! C3 {* V. |; z! A
//var host = "ws://192.168.85.128:8085/api/WSChat";
8 M7 W" W5 R; l6 M/ W) s
//webSocket = new WebSocket(host);
$ O; ~. s5 S, o6 u: Z0 t- l
3 U( Q+ [/ k2 z( @; o$ ~
$('#msg').append('<p>正在连接</p>');7 X+ @# R% A6 s; w
W# i, S" ~ U% q' H$ Q( @
ws.onopen = function () {
$ H! p$ b# K* M& {$ f8 x
$('#msg').append('<p>已经连接</p>');- l$ m4 D0 \+ p& Q! J
}
0 u$ S& z. V9 u/ T6 z. S% K% H
ws.onmessage = function (evt) {
7 J) \: O7 [) d3 \
$('#msg').append('<p>' + evt.data + '</p>');# u! w8 ]; W+ a( U( I
}
. }8 b- l+ P# C
ws.onerror = function (evt) { r: x6 m f, V1 r5 f6 d
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');- r( h8 e4 k/ `# ^
}7 f3 N: J' S8 {' Z- X) \3 e( d% m4 A: P
ws.onclose = function () {
& s; x5 L3 T7 H: y
$('#msg').append('<p>已经关闭</p>');: _$ a- }% s+ z4 k& x
}
& [% n* R- M# Y' k$ D& ~
});" i% f$ ]2 T+ _( w% K
5 | q2 V: v$ S, I+ R
$('#close').click(function () {6 P! ~9 S" F8 w7 `+ E4 V
ws.close();- t) z. ^* h; _" F
});5 V1 d! ?; y# q4 S v3 J* Q ?
' V4 _! I! l$ C ~6 b* d
$('#send').click(function () {
+ K( ~" B& w% V* e6 |. x
if (ws.readyState == WebSocket.OPEN) {
# C% \6 x0 \; E% F9 ]- c
ws.send($("#to").val() + "|" + $('#content').val());
0 k3 i6 o+ A) N2 O# D3 A& Z9 }
}
" R" u; d8 E9 x) o7 ?8 w* G: O
else {
9 h. Q0 |" Q/ R4 S$ o
$('#tips').text('连接已经关闭');
0 l2 t) _/ v8 S* q
}
: a0 Z& W: I9 x6 \
});
- S6 m- L! j$ o7 \" h& l8 c
2 o2 i# W' q4 v
}); m) k6 k6 [. n/ {% R$ n
</script>4 K, G9 O! G# T* d
</head>( L. i6 `: R% a6 B2 G
<body>
# h2 C) M1 C5 w% r, g& U
<div>" f/ Y4 t$ z7 k, N& m3 z N0 L
<input id="user" type="text" />
, v( A* k/ G* ]1 U
<input id="conn" type="button" value="连接" /> d1 h5 z3 _9 x1 _. L
<input id="close" type="button" value="关闭"/><br />
: U7 x+ H+ P/ f/ o" |9 ]
<span id="tips"></span>6 }7 z2 K, M: Z$ j
<input id="content" type="text" />
) x( p; J$ d/ T. M+ T
<input id="send" type="button" value="发送"/><br />
+ D% g4 C6 l' x6 X2 Y1 W
<input id="to" type="text" />目的用户
2 I) n( I* z9 d# }6 C( a; K
<div id="msg">9 f+ T. m9 S- ?9 f2 e! N+ \
</div>7 u6 w( Q% G. N3 C
</div>
% T( O+ B6 _+ E
</body>6 r+ O/ M5 ?) B) I/ m
</html>

复制代码

2.客户端A和客户端B通信效果

在浏览器中分别打开两个窗口，左边为客户端A，右边为客户端B，点击“连接”按钮，AB客户端分别与服务器建立连接

填写要发送的内容，即可看到A和B互相发送的信息了，即实现了AB客户端实现了WebSocket即时通信。

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

[html5] 在IIS上搭建WebSocket服务器（三）

浏览过的版块