在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 p" W/ a6 y" O0 X+ t7 D/ X
<html xmlns="http://www.w3.org/1999/xhtml">9 e1 z4 ^' Q* U# Q- V g
<head>) F4 h% J2 ~( e; c4 A k
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>4 r+ ]+ _' ^! e, W0 y
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
0 [, x. @4 S& \- Q* ?+ _6 o
<title></title>
5 m) m' \+ ?5 {$ F5 V+ x
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>8 i! s- t( I. p+ y1 [
<script>
0 P% p. }* b; g( U
var ws;
- }/ e& t. m2 ?( _% H
$().ready(function () {
4 H! M9 a0 E6 g
$('#conn').click(function () {
" i' M2 a. l( i+ d! t4 Q( f3 y
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());. e @) A# h2 m* V" z
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
4 b$ a+ h: X' m
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
m& E( M: Q8 b3 h; K. M7 g
//var host = "ws://192.168.85.128:8085/api/WSChat";
1 M$ H0 a' n5 c3 B
//webSocket = new WebSocket(host);
) J/ |) ]- K) z# M9 [6 ]) R& Y7 r
) B' Y$ a$ e$ M8 b5 i% g
$('#msg').append('<p>正在连接</p>');
& W3 [) \4 ]5 H
5 ^4 C9 W# d A l5 W+ F' V. s5 A
ws.onopen = function () {$ O' `5 L: O7 X
$('#msg').append('<p>已经连接</p>');& j, S% F/ [; I. \% U( r
}
) a' r9 u7 p0 [) W* d
ws.onmessage = function (evt) {
r5 V0 g/ k6 Z& d }8 ]. [
$('#msg').append('<p>' + evt.data + '</p>');5 j) [# q$ B' {. k1 q) y( F
}
- O* U& {1 o# \( [+ @. E) |9 Q0 Y5 I
ws.onerror = function (evt) {
5 {4 \6 L3 @" L! @/ W
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');4 U3 [% u- R% z; y" @7 C& t
}" F) v# s! }! W2 s
ws.onclose = function () {
$ Z, L' s+ D' c3 _
$('#msg').append('<p>已经关闭</p>'); P5 e/ R% f# Z. T; X W
}3 t- N8 K C7 C% G3 ]7 P
});7 E1 O" ]- `9 `+ e$ g+ @/ {2 I. c
# ^$ X! y$ a% M% i4 M, g W
$('#close').click(function () {
6 A% x: y6 y s) V4 L
ws.close();
4 y2 @" R) Q1 v- K8 `! s% s
});. S- j% M- K* A
8 @; V& v( E1 j# g0 B2 g8 C
$('#send').click(function () {* m8 \8 f1 t& [9 M! L
if (ws.readyState == WebSocket.OPEN) {
0 Y2 m$ G0 n0 A0 t. d3 l, t( u6 t
ws.send($("#to").val() + "|" + $('#content').val());
0 S2 J8 J' b1 F% x3 r) w# P
}
0 b1 e$ {& }. C. h* K7 L6 {
else {
B$ |4 W* K* J
$('#tips').text('连接已经关闭');: F* {/ K3 `8 o/ X/ Y# [8 A, v
}" h; t9 m% t" }# x
});
: m& r% l: W) ~" B V; H
$ O, a& X8 F# D1 D9 c6 `
});
- S1 `4 t5 H8 y$ J2 \* g- Y
</script>9 x' E: y$ Z2 R* C
</head>
5 [: Q1 F" }: V* _/ B5 Z6 R+ P7 H
<body>( l9 [, Q5 s% }
<div>
9 M& |% T9 A/ Z4 X* A3 \7 j& `4 Z/ [
<input id="user" type="text" />% X# b8 N2 s5 U3 W
<input id="conn" type="button" value="连接" />& H) F/ S4 Y% f8 D
<input id="close" type="button" value="关闭"/><br />
% ^! R8 `: e1 r) Z. ^ |
<span id="tips"></span>
, w1 P4 k7 i J: P% {2 ~0 v2 J
<input id="content" type="text" />8 e# R# `* x, L% e3 s8 h5 F/ K
<input id="send" type="button" value="发送"/><br />; H; f, C: W2 g6 s$ ?
<input id="to" type="text" />目的用户; _& K- P4 i8 C4 D
<div id="msg">+ z( \2 ^, ?9 C# d! {* p
</div>
7 I. l. R' j! Y8 @- r
</div>
; v( C) B5 p$ R" B' n0 t; c
</body>
4 N& f8 I) l: o6 d
</html>

复制代码

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

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

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

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

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

浏览过的版块