在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>
4 B* ~5 W* _ W
<html xmlns="http://www.w3.org/1999/xhtml">
0 Z: R( g9 H9 v. P7 s0 V
<head>
+ u: |* A3 z0 Y5 m% v" H6 x4 B
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>9 F" |2 D, `% c( p
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
. N1 ~3 J, q" f8 Y: [
<title></title>. a# i% i( O( n |5 E
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
+ [6 i7 |' A F# v3 |" q% Y
<script>
2 M' `( l0 C6 n: R! Y$ P
var ws;/ i5 {: y" b& e4 y
$().ready(function () {" W; q0 Q( h+ i% g' _, E
$('#conn').click(function () {
& R5 L( {+ X, c+ z; g% u
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
9 Z! |6 f7 e* p% R0 a
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());* c( L7 z0 ]& C& y B/ f( N: F
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();! N( P% L# ]. c; ^4 ?
//var host = "ws://192.168.85.128:8085/api/WSChat";' ^ k6 ~7 B. q6 h, d6 [% `2 `
//webSocket = new WebSocket(host);
3 B5 P @5 y3 W1 Q
& s9 h% ^4 U+ Z$ u) N( t
$('#msg').append('<p>正在连接</p>');6 a V/ R" S% X
5 ~8 I3 n1 q% `) e L% T; p# h4 Z
ws.onopen = function () {! n$ o: n5 r# N6 w# d7 W' G
$('#msg').append('<p>已经连接</p>');
n3 T* U7 @, f: R8 V# k! y
}
+ r8 ]( k/ P' l; Y1 {
ws.onmessage = function (evt) {8 |) z5 W1 z0 N. o7 R/ d
$('#msg').append('<p>' + evt.data + '</p>');( ~; L- V, a% p' q
}
/ s/ J# L0 _) k9 D6 N' n
ws.onerror = function (evt) {+ S A6 G) X+ Z$ q' w2 w* o
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
5 E: R/ w0 k3 J8 L0 H
}
3 V& f [% d; ~4 J2 k+ l
ws.onclose = function () { }, J/ F/ l/ c8 @5 H( _+ r4 w
$('#msg').append('<p>已经关闭</p>');7 V! m9 s* K: O* z0 m
}, L/ X" |" s2 P) v
});$ O. I. C4 ~( P; `! a" B* z
- y1 Z' f+ I# `3 M
$('#close').click(function () {
& y7 F- N, ^5 ]3 s7 f# H0 B- g* Y% w
ws.close();# W a* V8 r' a8 q' Z! K& ]. S
});/ O' E1 S, w/ s0 _
( {, r1 |- |1 \+ H8 P& x
$('#send').click(function () {
0 r1 _4 S* G3 D6 x- J: M
if (ws.readyState == WebSocket.OPEN) {* |5 m7 ] ?9 \8 u, d$ K+ ]
ws.send($("#to").val() + "|" + $('#content').val());
9 ?5 E& j# d- W
}7 @9 _9 T5 v& b* D
else {7 I/ z! V# i" l) |6 {# `
$('#tips').text('连接已经关闭');
7 N; W4 t1 k9 e
}/ V: P' Z$ a: A" r8 y0 L7 {( y
});
$ s- e$ N6 K$ l9 N! q7 j$ h
2 E/ {7 X! [* v* |
});) S2 n9 m2 Q0 J; H/ s
</script>
8 R3 V! X" t6 R% u$ ~4 C
</head>
S6 w, p9 Q: E3 [
<body>
M% R @% E/ H6 @' T
<div>
3 _, r( X( o# D% H! n
<input id="user" type="text" />3 n( S9 ?. j* p) |
<input id="conn" type="button" value="连接" />( h$ J0 t4 P3 ?& P% U
<input id="close" type="button" value="关闭"/><br />
8 A6 y" r( K% |$ ^9 S+ k
<span id="tips"></span>2 T' J9 V* b" z; @9 k
<input id="content" type="text" />
3 k6 @8 y$ P# N- Z4 p, `
<input id="send" type="button" value="发送"/><br />& ?9 t( O) R' k2 b
<input id="to" type="text" />目的用户
6 \. l4 V/ P. E7 K
<div id="msg">( Z" x& B; A1 V! U7 G* T7 s7 U
</div>
: i% C3 \' L: u3 U7 _7 w1 H* E
</div>
5 [! R4 K. O: P; o, L/ Q" D. T+ \
</body>5 L! U; K3 |/ S$ G& I5 f5 n
</html>

复制代码

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

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

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

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

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