在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>( h; w8 b1 z2 ?- V3 v
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
2 s/ i- V* [- w/ r" Y9 G; N& a# O
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> q' }3 w& A. Q/ a- J3 \/ e* t
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
/ n. I, R( _3 M% w7 J) |% H
<title></title>1 G& [4 V9 i5 H
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>% z6 Z5 }1 V D, G% \
<script>, N0 i y9 q' W, l$ @! S
var ws;
7 q: ?( @, v8 o$ f# ?* O
$().ready(function () {, [ j* q" S& E( z X
$('#conn').click(function () {0 x/ L' k- Q2 g9 x- J# l( R0 F \
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());- O8 B6 Y% z1 h" [3 O V% X/ U
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
- f) X& {: v* ?4 @+ C+ k/ N) A6 o E
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();' g& r F. [# ~# v; u
//var host = "ws://192.168.85.128:8085/api/WSChat";
# X& @1 b' d2 Y& D" k7 y
//webSocket = new WebSocket(host);% B) @/ _9 d4 _0 [* A( d, j
: Z1 S$ }! x- a+ C& K. T
$('#msg').append('<p>正在连接</p>');
* k: f2 C u$ u. U2 S9 J @
9 K# u$ w+ E1 b0 A' I: }& X& g
ws.onopen = function () {$ K; A- r- w! x8 C2 C# U
$('#msg').append('<p>已经连接</p>');
8 I2 A3 ~3 [: ~& Z
}
/ m9 F8 ~* z0 l6 G' r9 C" q
ws.onmessage = function (evt) {, U4 M$ W* _# W, Y) X/ H) D$ V) x
$('#msg').append('<p>' + evt.data + '</p>');# m. C9 ~5 D4 [& H# t P: P. {
}& A w1 h! p9 M
ws.onerror = function (evt) {
# Y& r* u; d* s6 Z
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
3 \1 N8 E. t( C" U# ~( T/ g0 V
}
" d3 B2 G3 C+ A0 M- d5 X
ws.onclose = function () {
5 L o: b/ g/ D( P# S3 D& Q
$('#msg').append('<p>已经关闭</p>');
4 z/ r; f9 J' B+ j9 b' ~7 D1 V
}. n7 v2 ^3 \, c" X. D) n
});2 V. y0 e+ Q2 O( i
& {& {& s' M/ H- \& v: F
$('#close').click(function () {& N2 l! W0 f! N ~5 [
ws.close();
9 w5 R- H7 ?! K$ _7 F* f9 k' i6 }
});/ y) x# }7 V* B5 D
' u; M* K! _4 ]' y' X
$('#send').click(function () {
; L/ F2 k/ A$ `3 R+ ^$ e* s
if (ws.readyState == WebSocket.OPEN) {9 f; P+ D/ A% S/ X4 l
ws.send($("#to").val() + "|" + $('#content').val());
, d* {+ c [' x' W
}
: [7 N& j/ ~. m% e: ^. V+ L
else {
5 \) V* z8 j! I, [8 Q. L( s( A
$('#tips').text('连接已经关闭');) F2 Q9 Z' l/ N9 l) ^
}
7 g0 H0 u9 A8 @5 ]" Q# f
}); q4 v& j3 C& M& d, x
3 ?4 ^+ [# X1 ?$ m$ a' q
});; F D- z* q. I4 [
</script>- H+ o" Y# }% U7 Q
</head>2 G+ ?" \8 m8 a% [7 o" H. Y' P5 ]
<body>8 J! H. u6 S; X! J7 y
<div>5 O' d0 x8 F% V$ R, {) u4 V+ p
<input id="user" type="text" />
6 A9 \/ }. c* ~6 {# m* V9 z2 l7 [$ T
<input id="conn" type="button" value="连接" /># O. a e( I* n2 U
<input id="close" type="button" value="关闭"/><br />4 [5 W. G' Q- N
<span id="tips"></span>
* U$ ~* m( h8 F
<input id="content" type="text" />7 S [* i! L( U x
<input id="send" type="button" value="发送"/><br />5 D- @. b p9 e# e
<input id="to" type="text" />目的用户
" E& M5 D$ R) _* U
<div id="msg">
3 a6 c+ g( b$ m# L, Q5 b: f
</div>) e2 E6 z, l3 H
</div>
7 t |7 j, `% f- i
</body>
1 l/ }) {/ D h. e- ~/ ^% @
</html>

复制代码

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

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

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

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

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

浏览过的版块