在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>) x/ s5 M4 s7 Z
<html xmlns="http://www.w3.org/1999/xhtml">+ t9 p; |: ^5 H0 K. r$ h' V
<head>6 Q+ H* G( j2 Z Y
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4 U7 b, B8 t9 g5 t
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>' ?3 A+ b0 H: H- Z, M' C
<title></title>
* |5 `/ z0 a: i5 P' \) B) N! [3 d1 K
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>* y# G7 L+ N: O! u2 s
<script>
: g1 B6 J' Y: K) u
var ws;
$().ready(function () {
1 g- @) t5 `" ~7 v7 A: D) n
$('#conn').click(function () {' M& v% x4 t, g( k L' j1 O7 X
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
0 C. E6 }+ G( @4 Q: ]# c
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());4 a* c, Y$ q- p, v/ g
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();# g8 K2 S9 d; C
//var host = "ws://192.168.85.128:8085/api/WSChat";
3 N7 P2 j" Y9 d" P
//webSocket = new WebSocket(host);( j2 |- e9 D- r5 \9 @
{# a8 W( V# t) M7 ~6 ^% w
$('#msg').append('<p>正在连接</p>');- t9 @5 S& Z; W+ G9 M7 t: S* U: K
0 k9 [+ B8 m( X9 Y7 v" `
ws.onopen = function () {
) s% K3 e& }0 s* v& F8 r. Z
$('#msg').append('<p>已经连接</p>'); Q0 J* m* K1 k) D
}0 c8 F9 E7 B) l
ws.onmessage = function (evt) {, t- k" }4 I2 U0 z
$('#msg').append('<p>' + evt.data + '</p>');/ d1 C! x. Q& p7 `
}
) v" m$ i6 _ f' t# J
ws.onerror = function (evt) {
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
1 Z% _: `2 i' Z( ~% Y& z
}
% A8 R7 b' q; s6 s
ws.onclose = function () {. f3 k" `6 X7 B: u* @9 M- d
$('#msg').append('<p>已经关闭</p>');9 ]+ r; f' k7 [* D' i% b
}! A, [- e, k: }/ r
});' B% o/ X+ U+ Y; p$ }
3 u7 o" L6 R3 ^6 Q' c3 A: v: q
$('#close').click(function () {
( h* }; y/ s& _# F
ws.close();$ p; L+ M7 p& p" C9 X7 K- N
});
. x& O3 @8 m* ^
- S# O t! T m8 F, x
$('#send').click(function () {' |: X3 n8 c' B! x+ K, }- |
if (ws.readyState == WebSocket.OPEN) {& {; y3 u( M* B* h; _) ~
ws.send($("#to").val() + "|" + $('#content').val());9 d# U% t4 p; c% W M$ j0 O. b t! p
}$ q. n$ E" h9 T
else {8 f0 G/ Y& K, g: B# }) z! r
$('#tips').text('连接已经关闭');7 v# C+ m- k+ D5 w0 |% b6 h0 {
}9 _6 e2 E3 |4 i, s
});
- L: G0 O6 n, i3 o
* F& ]' q3 X9 E# k' X* x2 `: E' n
});
3 m! H3 d. {3 Y- p" M; H" y& W
</script>
) a2 v! C1 N6 @) ?7 @9 R ^3 ^: f
</head>
$ k" j5 P: u/ c. J& V' @
<body>
' g3 j% ?* H G h' S
<div>
7 [ n. s# E- x- \3 Q
<input id="user" type="text" />, d! ?/ l G0 i
<input id="conn" type="button" value="连接" />: _8 R) ?) ]1 O- d
<input id="close" type="button" value="关闭"/><br />
+ B( \7 h& Y8 e6 a* [2 V; S, B+ `
<span id="tips"></span>7 e' j# u& l3 |/ M
<input id="content" type="text" />
) F6 }4 }1 k/ V" O q5 [) Y2 O
<input id="send" type="button" value="发送"/><br />
$ M( p9 l j; Q6 X! v7 ~" ?
<input id="to" type="text" />目的用户8 |3 L/ H" \/ M2 d- a
<div id="msg">
! ?7 d' ^/ @7 D6 s7 [3 I( d
</div>* R% I" w, ?5 i
</div>& t* _0 Q: B9 J( s
</body>6 @, m& i! ~8 e' E
</html>

复制代码

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

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

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

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

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

浏览过的版块