在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>8 w. Y6 C" c$ j$ x& O! D( m. r7 G
<html xmlns="http://www.w3.org/1999/xhtml">
4 |; v- n1 N4 s& h$ a% A
<head>2 ?/ a1 W9 y7 F! a
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- C3 \# I( B3 B" T" n3 z# D
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
1 ]5 c/ C4 Q; Q1 B5 V( b3 W& J
<title></title>
, c3 a% w7 P6 K/ f5 O0 A3 X; v& u
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
' }/ e* z* ^$ e* W0 u' E
<script>- _0 T8 W( E# Y% X- F
var ws;
/ F* M5 |1 }$ {/ l8 |3 e1 x- @
$().ready(function () {8 P2 f+ Y1 c& K: _# Y* ?) y
$('#conn').click(function () {
& p8 K4 b! [, x, ]) j; n1 W4 W
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());3 |* {6 S6 ]( N' c
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());( [+ P* @9 e7 Q& D, }
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();$ ^' x9 O0 n2 c) r2 |: v
//var host = "ws://192.168.85.128:8085/api/WSChat";
+ r0 S' O5 l3 ~4 J
//webSocket = new WebSocket(host);
8 j" g: y& e1 X* I
1 r, [: U6 G- X
$('#msg').append('<p>正在连接</p>');: h' ~/ ^2 n9 j1 J* ~
. @; z' r% S& A$ s! B1 m o
ws.onopen = function () {
: k8 @& F: V) A/ g' f8 W d6 C, c
$('#msg').append('<p>已经连接</p>');3 ]3 H- f: e" v! f6 ^7 \
}: V$ u* _/ l. B4 W& Q
ws.onmessage = function (evt) {8 k, A" { ~( ^; G6 \. }
$('#msg').append('<p>' + evt.data + '</p>');
2 N5 M( l) A- K3 Z
}
, c7 |8 i" U% p, P7 F& i
ws.onerror = function (evt) {" z% G3 L; {- t; n3 A& \
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');0 v& J/ o# |1 X/ A% @
}
! W% [! l7 H i! W
ws.onclose = function () {/ K% b6 e4 p2 ~8 }# p/ A7 \
$('#msg').append('<p>已经关闭</p>');
4 J+ ^& W% `' @
}% v" t" \6 W! _% M- ]; P9 A8 Z$ s
});' P7 q3 d" ^+ n) o# v: E
0 n: W4 D5 x0 y2 t" T% T
$('#close').click(function () {
' D! k8 }+ a2 l' S( M$ @
ws.close();/ C6 F3 v6 |3 e' i
});
' b) a4 p9 j8 t4 L' Y: C- v
" w. j0 i) V! o1 k" {% M& R
$('#send').click(function () {9 E3 C! w3 d: M9 V
if (ws.readyState == WebSocket.OPEN) {
' H2 C) K, l* {& C$ v! u
ws.send($("#to").val() + "|" + $('#content').val());
! L0 b/ c4 }/ h& |+ u. I8 Z( @
}) x; D3 K- d( f4 v) l8 X! K r
else {
8 a7 D$ H9 {, u; \
$('#tips').text('连接已经关闭');" t) e* `$ m- t) M
}* Z1 A! a- U% }, l
});$ B D2 c2 W d; ^
( f3 _7 h v* z
});5 K2 E$ W0 T8 T1 r
</script>2 S" w- F& J$ N, ~, s5 r* Y: L
</head>
! e% P7 _7 K! r& s& v$ T4 P
<body>
( s$ P* v3 U+ L3 i
<div>0 X ~+ k5 y) Z* X
<input id="user" type="text" />
9 o/ H4 [6 F& a& ~' R+ |
<input id="conn" type="button" value="连接" />/ _4 j w A$ n
<input id="close" type="button" value="关闭"/><br />9 U! T, i% s$ u$ Z+ E+ h
<span id="tips"></span>
5 T& o! C) a8 a: v. w
<input id="content" type="text" />; T3 L0 `$ ?- U$ M, Z5 o
<input id="send" type="button" value="发送"/><br />8 ? k8 q, ]5 j8 @2 a1 R
<input id="to" type="text" />目的用户1 v, E! J( j# |2 ^, [/ }4 o: S8 N
<div id="msg"> f8 l3 F2 p ]
</div>4 m: x6 f* c7 ~6 S& ?& l8 m
</div>, g4 M, \4 D) F% q: q# L- E
</body>
3 s5 {0 b) M7 W$ E" {8 ~0 `3 C
</html>

复制代码

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

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

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

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

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

浏览过的版块