Socket.io实际上是WebSocket的父集，Socket.io封装了WebSocket和轮询等方法

首先得在你的项目中安装socket.io

$ npm install socket.io

服务端代码：

var app=require('http').createServer()

var io=require('socket.io')(app)

var PORT =;

var clientCount=;

app.listen(PORT)

io.on('connection',function(socket){

    clientCount++

    socket.nickname='user'+clientCount

    io.emit('enter',socket.nickname+' comes in')

    socket.on('message',function(str){

        io.emit('message',socket.nickname+' says: '+str)

    })

    socket.on('disconnect',function(){

        io.emit('leave',socket.nickname+' left')

    })

})

客户端代码：

<!DOCTYPE html>

<html>

<head>

    <mate charset='utf-8' />

    <title>websocket</title>

    <script src="socket.io.js"></script>

</head>

<body>

    <h1>chat room</h1>

    <input type="text" id='sendtxt' />

    <button id='sendbtn'>发送</button>

    <div id="recv"></div>

    <script type="text/javascript">

        var socket=io("ws://localhost:5555/");

        function showMessage(str,type){

            var div=document.createElement('div');

            div.innerHTML=str;

            if(type=='enter'){

                div.style.color='blue';

            }else if(type=='leave'){

                div.style.color='red'

            }

            document.body.appendChild(div);

        }

        document.getElementById('sendbtn').onclick=function(){

            var txt=document.getElementById("sendtxt").value;

            if(txt){

                socket.emit('message',txt);

            }

        }

        socket.on('enter',function(data){

            showMessage(data,'enter')

        })

        socket.on('message',function(data){

            showMessage(data,'message')

        })

        socket.on('leave',function(data){

            showMessage(data,'leave')

        })

    </script>

</body>

</html>

来自慕课网课程：

https://www.imooc.com/learn/861

使用socket.io实现简单的聊天功能的更多相关文章

  1. 使用socket.io开发简单群聊功能

    1.新建package.json文件: { "name": "socket-chat-example", "version": " ...

  2. Spring 学习——基于Spring WebSocket 和STOMP实现简单的聊天功能

    本篇主要讲解如何使用Spring websocket 和STOMP搭建一个简单的聊天功能项目,里面使用到的技术,如websocket和STOMP等会简单介绍,不会太深,如果对相关介绍不是很了解的,请自 ...

  3. vue + socket.io实现一个简易聊天室

    vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那 ...

  4. 基于react+react-router+redux+socket.io+koa开发一个聊天室

    最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...

  5. 利用socket.io实现多人聊天室(基于Nodejs)

    socket.io简单介绍 在Html5中存在着这种一个新特性.引入了websocket,关于websocket的内部实现原理能够看这篇文章.这篇文章讲述了websocket无到有,依据协议,分析数据 ...

  6. 采用tcp协议和UDP协议实现简单的聊天功能

    Date: 2019-06-19 Author: Sun 一. Python3输出带颜色字体 实现过程: ​ 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. ​ 转义 ...

  7. 基于Node.js+socket.IO创建的Web聊天室

    这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受 ...

  8. 基于 socket.io， 简单实现多平台类似你猜我画 socket 数据传输

    一.前言 socket.io 实现了实时双向的基于事件的通讯机制,是基于 webSocket 的封装,但它不仅仅包括 webSocket,还对轮询(Polling)机制以及其它的实时通信方式封装成了通 ...

  9. android中实现简单的聊天功能

    这个例子只是简单的实现了单机版的聊天功能,自己跟自己聊,啦啦~~ 主要还是展示RecyclerView控件的使用吧~ 参考我之前写的文章: android中RecyclerView控件的使用 andr ...

随机推荐

  1. Apache Commons 简介

    Apache Commons 由多个独立发布的软件包组成,此页面提供了当前可用的 Commons 组件的概述. Components BCEL 字节码工程库 - 分析,创建和操作 Java 类文件. ...

  2. 使用excel中的数据快速生成sql语句

    在小公司的话,总是会有要开发去导入历史数据(数据从旧系统迁移到新系统上)的时候.这个时候,现场实施或客户会给你一份EXCEL文档,里面包含了一些别的系统上的历史数据,然后就让你导入到现在的系统上面去. ...

  3. DateTime的ToString方法格式

    新建一个.NET Core控制台项目,敲入如下代码: using System; namespace NetCoreDatetime { class Program { static void Mai ...

  4. 我得新博客上线了采用Vue+Layui的结合开发，后台采用asp.net mvc

    地址:www.zswblog.xyz 写完这个博客项目我真的很开心! 希望博客园的大佬们能去看看,如果可以希望帮我在Layui的年度案例点一个赞,谢谢! 地址:https://fly.layui.co ...

  5. 剑指offer 栈的压入和弹出

    题目描述输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈 ...

  6. Python多任务—线程

    并发:指的是任务数多余cpu核数,通过操作系统的各种任务调度算法,实现用多个任务“一起”执行(实际上总有一些任务不在执行,因为切换任务的速度相当快,看上去一起执行而已) 并行:指的是任务数小于等于cp ...

  7. vi/vim的快捷操作(2)

    1.拷贝当前行[yy],拷贝当前行向下的5行[5yy],并粘贴[p] 2.删除当前行[dd],删除当前行向下的5行[5dd] 3.在文件中查找某个单词,命令行模式下输入[/关键字],回车查找,输入[n ...

  8. 要什么 Photoshop，会这些 CSS 就够了

    标题党一时爽,一直标题党一直爽 还在上大学那会儿,我就喜欢玩 Photoshop.后来写网页的时候,由于自己太菜,好多花里胡哨的效果都得借助 Photoshop 实现,当时就特别希望 CSS 能像 P ...

  9. 金蝶BOS元模型分析

    对一些需求变化多样的产品而言,做好可变性设计是非常重要的.国外做得好的有Siebel,国内有金蝶的BOS,实际上金蝶的BOS很多理念跟Siebel是相似的,呵呵...他们都是采用MDD的方式来解决可变 ...

  10. Jmeter测试技巧

    最近在用Jmeter做接口测试,使用中整理了一些组件的使用技巧. 一. 用户定义的变量 都是全局变量,无论是否在某个线程组或请求内,都是采用最新赋值的内容 二. 固定定时器 在单个请求内是让本请求线程 ...