在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>
0 x s R! I; |* b1 a" O5 }- r
<html xmlns="http://www.w3.org/1999/xhtml">
7 c, F0 v' L0 s5 U0 g* x( |
<head>: w1 h/ c, C: y5 v4 s
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>1 p) d l" \! B7 l
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
) y" @* S0 u/ I/ r0 l
<title></title>
+ d; C8 p& V. g0 U. ~
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>, n' c( Y; C/ N( w
<script>
$ }9 @, X' v! _5 b) E) @1 m3 h( q
var ws;; j- z0 K) H" }3 g$ K C
$().ready(function () {
% I* @$ X1 l( e. i$ H1 l7 G
$('#conn').click(function () {
% c" U1 K( f+ P5 B8 C
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());5 r( \8 e G- i+ X% Q2 _0 Y/ n/ y
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());; q9 N; J) ^3 n+ v, ~+ O' Z1 O9 D
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
* q- d: N9 G% F# o: {
//var host = "ws://192.168.85.128:8085/api/WSChat";
% Y' k. n k M" ~; U/ A
//webSocket = new WebSocket(host);
! `8 N4 M: X2 k3 x
3 _$ N$ B" U8 O1 [+ T
$('#msg').append('<p>正在连接</p>');
, ^' G2 U% ^) ^ I
; s& C& ^' v0 x' z% X0 T+ a: y
ws.onopen = function () {0 \6 u; @! D4 z9 x
$('#msg').append('<p>已经连接</p>');9 F- z; b f) e. A. r, d
}& x- k2 d" m- b% p5 N
ws.onmessage = function (evt) {
$ D& P( _' P6 I& y7 U
$('#msg').append('<p>' + evt.data + '</p>');% X5 _7 }) X. M- u5 w6 e9 X3 _! W
}
6 P; K( Y+ y% N
ws.onerror = function (evt) {" d3 q) z$ z9 Q6 ^* k
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');6 ~1 [5 W L) P3 \. S
}2 X2 b1 a/ m" j/ J& b
ws.onclose = function () {7 ~5 ?, l: N) q% w3 W
$('#msg').append('<p>已经关闭</p>');
/ U! s: |' c' p3 F# C
}
7 k" ~4 m( g7 v( C6 N; r
});' n& I8 D/ G' ~! |& t; t
' o$ b4 N8 f5 Q. O1 X9 B9 s
$('#close').click(function () {- Q2 {1 L5 e. Q% [% L+ k' }
ws.close();
0 G& f4 w' _2 y8 \! a
});
6 i5 X& z& _* L* U& E$ \, t3 r
s" d6 q9 P }* h- T
$('#send').click(function () {) E0 } z( Q$ [4 H; R. M) U1 ?
if (ws.readyState == WebSocket.OPEN) {. `- D! `& L' d4 K) p- m W
ws.send($("#to").val() + "|" + $('#content').val());1 O$ B3 j2 s7 q8 l4 G6 }1 s a% P
}. b8 ^/ Y% F" V! T9 t
else {
: m- U( c2 S- q/ v6 G/ R& J
$('#tips').text('连接已经关闭');: b: K- N% G6 a
}& L3 w5 Q2 S- P) y& x
});7 B$ T2 |: ?% ^+ _& a0 U$ L
# d; T D, X- W: h+ [8 X' w6 e
});5 c) b' ?0 R1 ^# m/ s n
</script>
4 W4 C% A" ^, Z" W- @! H9 v$ x+ R
</head> t3 A' D7 S0 f* O
<body>6 o: j" [' c0 ^+ F# o
<div>
9 C+ }- d; K/ ~/ \* b9 j
<input id="user" type="text" />
1 I4 j* U* u1 q, O# J! C9 l
<input id="conn" type="button" value="连接" />
( l I8 S I+ V0 `
<input id="close" type="button" value="关闭"/><br />1 d1 E# V; `, h; s
<span id="tips"></span>1 B0 N* z2 C# N3 [
<input id="content" type="text" />9 e# _5 n, x+ T2 m
<input id="send" type="button" value="发送"/><br />. |- O0 x4 V: x7 G' ^; W, L+ u
<input id="to" type="text" />目的用户$ q, ]4 ^% L8 c- x+ P/ A3 g; @3 W
<div id="msg">
7 i" p' l) R# V2 x \) {7 G' ]$ i
</div>* [' l# N- m4 L' Y8 w5 a: W2 R1 X
</div>
" S( ^+ i: ]5 L7 K5 @
</body>4 `0 l6 a/ G4 p( G; F
</html>

复制代码

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

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

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

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

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