在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>! o. \3 B( P: X: _4 T5 j% d- @
<html xmlns="http://www.w3.org/1999/xhtml">9 C7 R% _6 Q' d" M D" P
<head>
1 ~% o- E# |) W5 d2 u
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
& b- O; q& g, c! \3 r5 x2 k2 A, H
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>4 t6 }) y- T3 W: u+ u( B
<title></title>
4 u- F8 C/ ~- R. D
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
2 `& W) J& {( g/ [
<script>3 F2 i- H2 b. X$ w+ i8 T
var ws;1 ~! R8 `$ M! n; Y
$().ready(function () {" t# Z$ E: k3 L* h7 ~. b6 L
$('#conn').click(function () {8 _+ R7 \& ?4 x5 L" u( z4 j1 t+ @
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());. Z" Y) W% c' t9 b; W9 \ N
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());6 u" K" y/ }5 p
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
P* l q: z2 k* P5 O
//var host = "ws://192.168.85.128:8085/api/WSChat";1 K: s9 ]3 R, m8 _; W! j
//webSocket = new WebSocket(host);- f1 ]/ \: l( R R. v
, D& n( G c/ r( k. c- M- |
$('#msg').append('<p>正在连接</p>');) F( j. d4 K+ p5 @. p
$ N/ x% n: s5 Y" ^$ N- s# Y$ A
ws.onopen = function () {, s4 H5 X& H- T( s
$('#msg').append('<p>已经连接</p>');
6 w3 P, m. [# q6 y; f R
}$ z1 f8 b1 a* w
ws.onmessage = function (evt) {& `6 E& W/ ~" e
$('#msg').append('<p>' + evt.data + '</p>');
4 P: |+ f( X' E3 {6 X9 D( }8 {
}
2 x5 }# h# S+ b- n
ws.onerror = function (evt) {* @* Y/ K( ~ R/ a6 n9 k1 O4 F
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');5 l/ j+ L) A' K( F7 X
}/ x/ _6 e5 N5 E9 K
ws.onclose = function () {
4 ?0 U- I/ F- ] k8 B& \: P
$('#msg').append('<p>已经关闭</p>');( L/ L2 E0 ]7 F: b7 L- K
}
1 E0 [; z2 c5 W4 `7 ]3 n8 z
});: ?8 j9 X- D4 j' j9 c2 W
4 I( c6 }, X/ V' u3 C" m
$('#close').click(function () {5 e4 r2 J2 ^ h" M+ p4 E
ws.close();
5 f4 Z$ W2 B a9 |
});: M H( i% g2 g) C- |
( v! T) ~/ a0 [2 z; u
$('#send').click(function () {
: c {. d' ?9 W: C% a4 f! P
if (ws.readyState == WebSocket.OPEN) {
8 R# \7 V" d& f: D7 n' X0 `+ u* W
ws.send($("#to").val() + "|" + $('#content').val());
8 f7 P! t! o: |" m3 m, \
}
$ U& ?# c# c* J) l; R' j5 a
else {
: Y0 l; f1 ?+ F% u
$('#tips').text('连接已经关闭');$ R1 f& H$ V4 ]
}, Q: n J" @% v* Z5 {
});/ H8 z4 G1 f& }0 k, I% X, q3 [
! a" J' d7 a; f" X! X
});
. k! B4 l1 q4 @& R# ?3 Q3 _- t
</script>$ ]3 p5 y, i3 I' h
</head>) q5 ^ Z" A2 x) E
<body>
: N* o& A* u! b" k
<div>
+ H2 D- k6 I7 _8 L% V
<input id="user" type="text" />- @) ^8 Y2 k, b( ^( b& `
<input id="conn" type="button" value="连接" />
7 s8 x) t: F0 ~) p+ S. {- Q' G$ Q
<input id="close" type="button" value="关闭"/><br />
0 j2 r5 W7 E/ N
<span id="tips"></span>7 N5 r3 [3 b0 @" a2 @
<input id="content" type="text" />
+ U& \( d6 C% p* W, x$ v
<input id="send" type="button" value="发送"/><br />
3 q* G! {" _% D# W0 a4 o
<input id="to" type="text" />目的用户
- D; V$ U7 M- J) u7 ?& K
<div id="msg">
8 x% ~- U8 R* [
</div>; ^, z3 T. D. P. F; @2 j
</div>
`4 S( g' k3 r1 ^4 P8 S
</body>2 L+ K) ^/ s5 M
</html>

复制代码

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

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

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

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

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

浏览过的版块