在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>( w/ E+ R0 h" W5 C( e! i( E
<html xmlns="http://www.w3.org/1999/xhtml">5 \6 C* R8 D; W1 @7 e1 ~
<head>; p! N" E7 `- {5 t- Z2 j# U* v
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>( ?& B- ?2 I6 a0 y' \ m9 Q1 a& T
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>- V4 i& F ~, h, ^1 R% m
<title></title>
4 n. o5 [" X& O6 n
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
2 I, E: j$ K$ S4 I: H
<script>9 m. P0 b9 S* i& B
var ws;
) ^( w& V- b- N0 S5 K
$().ready(function () {. E% B/ F# N/ l! w
$('#conn').click(function () {, `3 s' I0 |# `$ @1 P `5 { T
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
: v( G, {5 u' G4 Y/ P
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());; i5 B- M4 z X" g
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();( `" n3 y8 x/ ?7 u
//var host = "ws://192.168.85.128:8085/api/WSChat"; n' H$ l5 z: O' P8 W8 G6 H8 y+ p
//webSocket = new WebSocket(host);
( C" z5 c- a( q& ], x3 x
; l, r, B3 U; n7 w8 I
$('#msg').append('<p>正在连接</p>');
- q) S3 B4 c5 q
0 [- N/ m5 e( p, H0 w- A% g
ws.onopen = function () {
" J* w& A( m# o& j
$('#msg').append('<p>已经连接</p>');7 b8 D% c' U0 }, G; ]; r3 l
}. j1 X+ c' O }4 z+ h
ws.onmessage = function (evt) {
6 t& V, T- z, U3 b3 P
$('#msg').append('<p>' + evt.data + '</p>');; ^9 `0 R7 a* h9 m9 Y
}+ F4 `( G# A/ L+ ?1 ~$ X* |3 s
ws.onerror = function (evt) {& h5 U( k& [, x |# ~
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');4 }/ V H8 S- s5 j& Q0 j
}
, i8 d7 [+ M- A1 R5 u
ws.onclose = function () {5 M! c" x2 E& m+ o
$('#msg').append('<p>已经关闭</p>');
" D N6 b: s& w# {
}6 Z; y& c4 Z$ y! _
});
1 E* @. I8 I9 R( [ r. Y* v3 }3 y
+ ~3 Y7 b2 i5 s& k+ _4 D7 N
$('#close').click(function () {5 W |4 a4 P( H) U( a
ws.close();4 U8 k. `) E$ s
});! J- s6 @# b# l
& M' a& ?: K3 I; u
$('#send').click(function () {
+ R9 }4 c6 J0 u6 g! h, l
if (ws.readyState == WebSocket.OPEN) {
; Q+ ^7 x1 s; m S/ U
ws.send($("#to").val() + "|" + $('#content').val());. f' Z5 {9 k* d) l+ r. m
}8 r; Q2 J' Z4 G$ t9 n
else {
3 r8 N) f- C$ o9 }5 |# w: a
$('#tips').text('连接已经关闭');* D% C$ o* ~. M+ r8 t: A w
}% U7 p# |7 f* }- e; @3 I% R
});* m6 s& ?7 u# l: v* R" V
# g( c( O5 n$ F' _
}); ?0 ~8 {- l' _
</script>6 ~/ s. o, p9 Z c
</head>
9 _6 z8 T8 L9 z$ s$ {+ A: [+ ]
<body>
: o% s+ Z) y+ r" F0 o' \: {" M/ R1 ~
<div>5 v. }/ o( p# e0 a9 [' ^
<input id="user" type="text" />* p& ]) H1 U, Z- |
<input id="conn" type="button" value="连接" />
! k$ s6 m! Z2 B4 S6 J
<input id="close" type="button" value="关闭"/><br />
: v L1 k' e' F9 ?. ]$ S- n& e
<span id="tips"></span>
: {' x5 o# v( ?2 z, ?, W' ^
<input id="content" type="text" />
( A- \, `% F: z4 P' W* m
<input id="send" type="button" value="发送"/><br />
8 Q0 |- w4 @! t8 e0 x( U% i
<input id="to" type="text" />目的用户! i4 `7 J, y) P) A3 Y- _
<div id="msg">! ]; F- v9 f, F- y) f% m
</div>& _, `" S7 u2 E/ Q
</div>: _! r4 l, y( a% u& u2 }% q! p
</body>
' ^: P: H9 F: c4 Q
</html>

复制代码

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

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

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

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

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

浏览过的版块